标签：
前段时间，社区个人中心改版，看了下设计图，当时隐约感觉到有两个地方（圆环百分比，菜单栏定位导航）比较麻烦。设计图大致如下：
首先看圆环百分比，网上的做法大致分两种，一种是用了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‘); });
标签：
原文地址：http://www.cnblogs.com/wj204/p/5578292.html
