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 获取的高度,写死的话就不能适配不同屏幕的手机了,

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

 

posted @ 2018-12-14 14:35  lijuntao  阅读(2131)  评论(2编辑  收藏  举报
TOP