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

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

  • 相关阅读:
    在线教程-Qt参考文档
    利用QT中Qpainter画点,直线,弧线等简单图形
    Office2013下载地址
    Linux下声卡的安装(ALSA)
    聆听自由的声音----Linux下声卡驱动软件ALSA的安装与配置
    linux找回root密码
    删除排序数组中重复的元素【数组专题】
    类模板派生出新的类模板
    TCP的拥塞控制
    linux运行级别
  • 原文地址:https://www.cnblogs.com/lijuntao/p/10119300.html
Copyright © 2011-2022 走看看