无缝向上滚动原理代码

Posted 2020-10-19 mybookc

<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>