首页 > 上网技巧 > 电脑小技巧 > 移动手机端H5无缝间歇平滑向上滚动js代码

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

时间:2017-09-04 09:09 作者:QQ地带 我要评论

在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够平滑,而且,在移动端H5页面中很多人使用的js库是zeptoJS,所以要想使用animate方法还要额外引用一个fx.js的插件,这无疑又增加了页面的体积,增加了服务器的请求负担,这显然不是最好的解决办法。那么,今天,本人就给大家分享一个利用css3的transform并结合transition来实现我们常见的无缝间歇平滑向上滚动的特效,其实就是开启硬件加速。
html code:
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Document</title>
<style>
*{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;}
</style>
<script src="zepto.min.js"></script>
</head>
<body>
<div class="scroll"> 
    <ul>
        <li>2016高颜值拍照手机:一言不合秒单反</li> 
        <li>细说奥运中国女排的各「大长腿」</li> 
        <li>开学季来了 年轻人如何选择第一台笔记本?</li> 
        <li>六大零食是缓解痛经好帮手 !</li> 
    </ul> 
</div>
</body>
</html>
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%

Google提供的广告