前段时间，社区个人中心改版，看了下设计图，当时隐约感觉到有两个地方（圆环百分比，菜单栏定位导航）比较麻烦。设计图大致如下：
首先看圆环百分比，网上的做法大致分两种，一种是用了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:;
left:;
}
.left, .right {
width: 60px;
height: 60px;
box-shadow: inset 0 0 0 10px #fd6649;
border-radius: 50%;
position: absolute;
top:;
left:;
}
.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');
});