zoukankan      html  css  js  c++  java
  • 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 获取的高度,写死的话就不能适配不同屏幕的手机了,

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

  • 相关阅读:
    POJ3613 Cow Relays 经过n条边的最短路
    UML笔记(六)
    UML主要内容及参考资料
    UML笔记(五)
    UML笔记(一)
    UML笔记(三)
    UML笔记(四)
    软件工程——第十一章 软件项目管理
    软件工程——第十章 软件工程管理
    UML笔记(二)
  • 原文地址:https://www.cnblogs.com/lijuntao/p/10119300.html
Copyright © 2011-2022 走看看