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 獲取的高度，寫死的話就不能適配不一樣屏幕的手機了，

　　　裏面還能夠本身調節速度，本身去代碼吧，一看就知道改那個！