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

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

  • 相关阅读:
    第一次作业
    C语言I博客作业02
    C语言|博客作业11
    C语言I博客作业10
    C语言I博客作业09
    C语言I博客作业08
    C语言I博客作业07
    C语言I博客作业06
    C语言I博客作业05
    JDK-14 & Eclipse & Hello World!
  • 原文地址:https://www.cnblogs.com/lijuntao/p/10119300.html
Copyright © 2011-2022 走看看