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

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

首先看圆环百分比，网上的做法大致分两种，一种是用了CSS3中的transform:rotate和clip两个属性，另一种用canvas的 http://www.cnblogs.com/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');
});