仿芝麻信用指针



.b-credit{
  .credit-img
    {
      position:relative;
      li{
        position:absolute;
        width:7px;
        height:7px;
        img{
       
        }
      }
  }
}
 

  var aA = null;
    var oDiv = null;
    var remNum = 30;
    var list = [];
    var tatal = 38; //一个圆有几个点
    var showSpot = 23;

  
      let a = remNum * 1.5;// 150;  //圆心坐标
      let b = remNum * 1.5;  //圆心坐标
      let r = remNum * 1.5;  //半径
      let start = 27;

      let h = 360 / tatal; //每个点的角度
      let radio = start * h;

      let arr = [];
      // 默认是从12点坐标开始   这里是从第二27个点开始
      for(var times=start; times< (start + showSpot); times++) {

          var hudu = (2*Math.PI / 360) * h * times;

          var X = a + Math.sin(hudu) * r; //得到 left 坐标

          var Y = b - Math.cos(hudu) * r;  //得到 top 坐标

              // 定位到中心点
              X = X - (remNum * 0.27)/2; 
              Y = Y - (remNum * 0.27)/2;
              
              arr.push({
                  style : {'left':X+'px','top' : Y+'px','transform': 'rotate('+(radio-180)+'deg)'},
                  color : false,
              })
              radio+=h;
      }
      list = arr;
    
      
    for(var i=0;i<23;i++){
      $(".img").append("<li><img src='[[ s.image4 ]]' alt='img'></li>");
    }
    
    oDiv=document.getElementsByClassName('img')[0];
      aA=oDiv.getElementsByTagName('li');
    // 
    for(var i=0;i<aA.length;i++){
      aA[i].style.left = list[i].style.left;
      aA[i].style.top = list[i].style.top;
      aA[i].style.transform = list[i].style.transform;
    }
   
   var num = {{ detail_context.object.credit_score|default:'0' }};
   var count = 1000/23;
   if(num<count){
     $(".img li:eq(0)").find('img').attr('src',"[[ s.image4 ]]");
   }else if(num == count*1){
     $(".img li:eq(0)").find('img').attr('src',"[[ s.image3 ]]");
   }else if(num > count*1 && num <= count*2){
     for(var i=0;i<2;i++){
        $(".img li:eq("+i+")").find('img').attr('src',"[[ s.image3 ]]");
     }
   }else if(num > count*2 && num <= count*3){
     for(var i=0;i<3;i++){
       $(".img li:eq("+i+")").find('img').attr('src',"[[ s.image3 ]]");
     }
   }
 .............
  //控制菜单悬浮
   var topH=$("#{{ slide.randomid }}_top").height();//获取头部高度,top指导航栏上面的部分
   var navbg=$("#{{ slide.randomid }}_navbg");//获取导航栏对象
    $(window).scroll(function () {
        if($(window).scrollTop()>topH){//对比滚动的距离与导航栏上面部分的高度大小来动态添加css样式
            navbg.addClass("scrollNav")//对导航栏添加样式
        }else{
            navbg.removeClass("scrollNav")//去掉导航栏添加的样式
        }
    });
    
  }, 0);
 

发布了36 篇原创文章 · 获赞 5 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_37935725/article/details/82853913