向上来回无缝滚动html,移动手机端H5无缝间歇平滑向上滚动js代码

在没结合css3的transform实现平滑过渡前，我都是用的jquery的animate方法，此方法在PC端基本看不出来有稍微卡顿的现象，但是在性能不高的手机上使用该方法，就会有明显的卡顿现象，不够平滑，而且，在移动端H5页面中很多人使用的js库是zeptoJS，所以要想使用animate方法还要额外引用一个fx.js的插件，这无疑又增加了页面的体积，增加了服务器的请求负担，这显然不是最好的解决办法。那么，今天，本人就给大家分享一个利用css3的transform并结合transition来实现我们常见的无缝间歇平滑向上滚动的特效，其实就是开启硬件加速。

html code:

Document

*{margin:0;padding:0;}

li{list-style:none;}

body{line-height:1.5;font-size:14px;}

.scroll{display:inline-block;overflow:hidden;position:relative;height:30px;}

.scroll ul{transform:translateY(0);}

.animate{-webkit-transition:all .3s ease-out;}

.scroll li{overflow:hidden;display:-webkit-box;margin-left:10px;width:90%;height:30px;line-height:30px;color:#333;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;white-space:normal;}

• 2016高颜值拍照手机：一言不合秒单反
• 细说奥运中国女排的各「大长腿」
• 开学季来了 年轻人如何选择第一台笔记本？
• 六大零食是缓解痛经好帮手 ！

js code:

$(function(){

var scrollDiv = $(".scroll"),

$ul = scrollDiv.find("ul"),

$li = scrollDiv.find("li"),

$length = $li.length,

$liHeight = $li.height(),

num = 0;

if(scrollDiv.length == 0){

return;

}

if($length > 1){

$ul.append($li.eq(0).clone());

setInterval(

function(){

num++;

$ul.addClass("animate").css("-webkit-transform","translateY(-"+ $liHeight*(num) +"px)");

setTimeout(

function(){

if(num == $length){

$ul.removeClass("animate").css("-webkit-transform","translateY(0)");

num = 0;

}

},300);

},3000);

}

});

标签： h5

顶一下

(0)

0%

踩一下

(0)

0%