随笔(标题太难了)hhh

原创 1164464528 随笔 html/css 115阅读 2017-12-27 18:40:37 举报

<div class="tepin-subNav" data-num="0">
<ul style="transition: 300ms; transform: translate3d(0px, 0px, 0px);">
<li class="on"><a>20-40元</a></li>
<li class=""><a>40-99元</a></li>
<li class=""><a>15-20元</a></li>
<li class=""><a>0-15元</a></li>
<li class=""><a>特惠商品</a></li>
</ul>
</div>

//所有li的宽度总和
var widths = 0;
var liLeft = othis[0].offsetLeft; //当前的li距离ul的距离
var dwidths = $(document).width(); //具体浏览器宽度
var tablist = $('.tepin-subNav li');
for(var i=0;i<tablist.length;i++){
widths+=tablist.eq(i).width();
}
console.log(liLeft)
var vLeft = 0;
if(liLeft< 200){ // 我才不滚
vLeft = 0;
}else
if(liLeft > widths-dwidths){ //(┬_┬)我已经没地方滚了
vLeft = -(widths-dwidths)
}else{
vLeft = -(liLeft-130) //滚多远
}
othis.parent('ul').css('-webkit-transition', '300ms');
othis.parent('ul').css('transform','translate3d('+vLeft+'px, 0px, 0px)') //滚吧

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复