javascript新闻向上停顿1秒后继续滚动

 

最近在写一些移动端的页面，看到平时一些插件的新闻向上滚动效果都是鼠标一进去才会停止，然后我下面写了一个类似的，但是功能不一样，

功能介绍：向上滚动固定的高度后停顿1-2s展示，然后继续滚动

<html>
    <head>
        <title>vue</title>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <style>
            *{list-style: none;padding:0px;margin:0px;}
            #app{height:30px;border:1px solid #ccc;overflow: hidden;width:300px;margin:50px auto;}
            #app li{line-height: 30px;padding:0 10px;height: 30px;}
        </style>
    </head>
    <body>
        <div id="app">
            <ul id="slide1">
                <li>11111111111111111111111111111</li>
                <li>22222222222222222222222222222</li>
                <li>33333333333333333333333333333</li>
                <li>44444444444444444444444444444</li>
                <li>55555555555555555555555555555</li>
                <li>66666666666666666666666666666</li>
                <li>77777777777777777777777777777</li>
                <li>88888888888888888888888888888</li>
                <li>99999999999999999999999999999</li>
                <li>00000000000000000000000000000</li>
            </ul>
            <ul id="slide2"></ul>
        </div>
    </body>
    <script>
        var speed = 40;
        var app = document.getElementById('app');
        var slide1 = document.getElementById('slide1');
        var slide2 = document.getElementById('slide2');
        slide2.innerHTML = slide1.innerHTML;
        var timer ,timeout;
        function marqueeMethods(){
            clearTimeout(timeout)
            if(slide2.offsetTop-app.scrollTop<=0){
                app.scrollTop = app.scrollTop - slide1.offsetHeight;
            }else{
                app.scrollTop++;
                if(app.scrollTop%30==0){
                    clearTimeout(timeout);
                    clearInterval(timer);
                    timeout = setTimeout(function(){
                        app.scrollTop++;
                        return timer = setInterval(marqueeMethods,speed);
                    },1000);
                }
            }
        }
        timer = setInterval(marqueeMethods,speed);
    </script>
</html>

 

posted on 2018-03-15 11:41  ss要更加努力  阅读(1447)  评论(3)    收藏  举报

导航