javascript新聞向上停頓1秒後繼續滾動

時間 2019-11-20

標籤 javascript 向上停頓 1秒繼續滾動欄目 JavaScript 简体版

原文原文鏈接

最近在寫一些移動端的頁面，看到平時一些插件的新聞向上滾動效果都是鼠標一進去纔會中止，而後我下面寫了一個相似的，可是功能不同，html

功能介紹：向上滾動固定的高度後停頓1-2s展現，而後繼續滾動vue

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。