码迷,mamicode.com
首页 > 其他好文 > 详细

无缝向上滚动原理代码

时间:2017-12-27 18:03:53      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:htm   lin   css   ready   pos   个数   停止   body   highlight   

<script>
    $(document).ready(function () {

        var ll = 0;//向上移动的距离

        var rolling = setInterval(function () { star() }, 1000);
        var leng = $(‘.rolling‘).children().length;//获取滚动的个数
        var hei = leng * 30 + 30;//30是滚动的距离
        $(".rolling-li:last-child").after($(".rolling").html());//拷贝一份

        $(".rolling-li").hover(//鼠标滑过停止
            function () {
                clearInterval(rolling);
            },
            function () {
                rolling = setInterval(function () { star() }, 1000);
            }
        );

        function star() {//动画开始
            if (leng = 10) {
                if (ll >= hei) {
                    ll = 30;
                    $(".rolling-li").css("bottom", "0px");
                    star();
                } else {
                    $(".rolling-li").animate({ bottom: ll + ‘px‘ });
                    ll += 30;
                }
            } else { clearInterval(rolling); }
           
        }

    });
</script>

  

无缝向上滚动原理代码

标签:htm   lin   css   ready   pos   个数   停止   body   highlight   

原文地址:https://www.cnblogs.com/mybookc/p/8126006.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!