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');
});