js 上下滚动加停顿效果，js 跑马灯加停顿效果

 

<div  id="middle">
                    <ul id="slide1"> 
                      <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> 
                      <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> 
                      <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> 
                      <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> 
                      <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> 
                      <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> 
                      <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> 
                      <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> 
                    </ul> 
                    <ul id="slide2"></ul>
                </div>

html

 

#middle{
                width: 100%;
                height: 100%;
                overflow-y: auto;
            }
            #middle li { 
                height: 100%;
            } 

css

 

var speed = 40;
            var app = document.getElementById('middle');
            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% ($('#slide1 li').eq(0).height()) == 0){
                        clearTimeout(timeout);
                        clearInterval(timer);
                        timeout = setTimeout(function(){
                            app.scrollTop++;
                            return timer = setInterval(marqueeMethods,speed);
                        },2000);
                    }
                }
            }
            timer = setInterval(marqueeMethods,speed);

js

 

注意 app.scrollTop% ($('#slide1 li').eq(0).height()) == 0

　　   $('#slide1 li').eq(0).height() 这个是获取 走多少距离停的，因为要适配手机直接用jquery 获取的高度，写死的话就不能适配不同屏幕的手机了，

　　　里面还可以自己调节速度，自己去代码吧，一看就知道改那个！    

 

转载于:https://www.cnblogs.com/lijuntao/p/10119300.html