zoukankan      html  css  js  c++  java
  • 无缝滚动--垂直方向

    <!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" " http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
    <html xmlns=" http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无缝滚动</title>
    <style type="text/css">
    img{
    border:0;
    height:100px; 150px;
    }
    td img{
    margin:0 10px;
    }
    </style>
    </head>
    <body>
    <!-- 纵向向无缝滚动-->
    <div id="demo" style="overflow:hidden;height:350px;150px">
    <div id="demo1">
    <a href="#" target="_blank"><img src="images/haier_logo.png"></a>
    <a href="#" target="_blank"><img src="images/ts_logo.png"></a>
    <a href="#" target="_blank"><img src="images/jykj_logo.png"></a>
    <a href="#" target="_blank"><img src="images/jz_logo.png"></a>
    <a href="#" target="_blank"><img src="images/klc_logo.png"></a>
    <a href="#" target="_blank"><img src="images/lp_logo.png"></a>
    <a href="#" target="_blank"><img src="images/smsx_logo.png"></a>
    <a href="#" target="_blank"><img src="images/lf_logo.png"></a>
    <a href="#" target="_blank"><img src="images/yd_logo.png"></a>
    <a href="#" target="_blank"><img src="images/wpt_logo.png"></a>
    </div>
    <div id="demo2"></div>
    </div>
    <script>
    var speed=40;
    var demo2=document.getElementById("demo2");
    var demo1=document.getElementById("demo1");
    var demo=document.getElementById("demo");
    demo2.innerHTML=demo1.innerHTML
    function Marquee(){
    /*向上滚动*/
    /*if(demo2.offsetTop-demo.scrollTop<=0){
    demo.scrollTop-=demo1.offsetHeight;
    }else{
    demo.scrollTop++;
    }*/
    /*向下滚动*/
    if(demo.scrollTop<=0){
    demo.scrollTop+=demo1.offsetHeight;
    }else{
    demo.scrollTop--;
    }
    }
    var MyMar=setInterval(Marquee,speed);
    demo.onmouseover=function() {clearInterval(MyMar)}
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
    </script>
    </body>
    </html>

  • 相关阅读:
    hdu 1047 Integer Inquiry
    大数模板(高精度)
    git 学习
    java List 排序
    简单排序总结
    JDK1.8
    webservice 学习笔记 1
    inline-block,inline,block,table-cell,float
    mybatis 学习视频总结记录
    left join right inner join 区别
  • 原文地址:https://www.cnblogs.com/xiaotaiyang/p/3850246.html
Copyright © 2011-2022 走看看