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

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

  • 相关阅读:
    第二章作业第2题--苏志华
    小学生四则运算应用软件(一)
    YOLO1至YOLOV3方法讲解
    C++ STL中的二分查找
    C++ 中的prioriy_queue 优先级队列 转
    C++ 中的容器(栈、堆、队列) 转
    从尾到头打印链表
    替换空格
    C++中vector<vector<int> >
    对称平方数
  • 原文地址:https://www.cnblogs.com/lijuntao/p/10119300.html
Copyright © 2011-2022 走看看