css3圆环百分比,菜单栏定位导航

  前段时间,社区个人中心改版,看了下设计图,当时隐约感觉到有两个地方(圆环百分比,菜单栏定位导航)比较麻烦。设计图大致如下:

首先看圆环百分比,网上的做法大致分两种,一种是用了CSS3中的transform:rotate和clip两个属性,另一种用canvas的 /eyeear/p/5278092.html (自己没有实践)

html代码为:

<div class="spinner spinner_{$key}" data-praise="{$value['praise_total']}">
  <div class="spinner_left">
    <div class="left">
    </div>
  </div>
  <div class="spinner_right">
    <div class="right">
    </div>
  </div>
  <div class="spinner_logo logo_pic"></div>
</div>

css代码为:

 .spinner {
              width: 60px;
              height: 60px;
              position: relative;
              border-radius: 30px;
              box-shadow: inset 0 0 0 10px #edeff1;
              float: left;
              margin-right: 10px;
              .spinner_left, .spinner_right {
                  width: 60px;
                  height: 60px;
                  position: absolute;
                  top: 0; 
                  left: 0;    
              }
  
              .left, .right {
                  width: 60px;
                  height: 60px;
                  box-shadow: inset 0 0 0 10px #fd6649;
                  border-radius: 50%;
                  position: absolute;
                  top: 0;
                  left: 0;
              }
  
              .left {
                  transform: rotate(0deg);
              }
  
             .spinner_left, .left {
                 clip: rect(0, 30px, auto, 0);
             }
 
             .spinner_right, .right {
                clip: rect(0, auto, auto, 30px);
             }
}

js代码为:

 $('.spinner').each(function(index, el) {
            var pra = $(this).data('praise');   
            if(pra < 10 ) { 
                pra = 10;   
            }   
            if(pra > 300) {
                pra = 300;  
            }   
            var num = (pra/300)*360;
    
            if(num <= 180) {    
                $(this).find('.right').css('transform', "rotate(" + (num + 180) + "deg)");
                $(this).find('.left').css('transform', "rotate(" + (-180) + "deg)");
            } else {
                $(this).find('.left').css('transform', "rotate(" + num  + "deg)");
            }   
}); 

再来看菜单栏定位导航:

  这里主要看js处理的方法,之前自己实现得差不多,好像是那么回事,但是效果却不太友好,有点卡卡的感觉,看了下http://www.imooc.com/learn/56 这个教程,改进了下。感觉自己之前想法是对的,不过好像绕了一圈,导致写的有点复杂:

  最初版本:

$(window).scroll(function () {
    for(var i = 0; i < heights_count; i++) {
                /*  
                if( i == 4) { //最后一个
                    if((heights[i] - 20 < toph)) {
                        $menulis.removeClass('active');         
                        $($menulis[i]).addClass('active');  
                    }
                } else if(toph == 0) { //第一个
                    $menulis.removeClass('active');         
                    $($menulis[0]).addClass('active');  
                } else {
                    if((heights[i] - 20 < toph) && (toph < heights[i] + 20)){ 
                        $menulis.removeClass('active');         
                        $($menulis[i]).addClass('active');  
                    }
                }
                */
    }
});    

  最终版本:

$(window).scroll(function () {
    for(var i = 0; i < heights_count; i++) {
         if( toph > heights[i] - 80 ) {
           last = i;
          } else  {
            break;
          }
    }
    $menulis.removeClass('active');
    $($menulis[last]).addClass('active');
});
posted @ 2016-06-12 17:33 wj704 阅读(...) 评论(...) 编辑 收藏