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>

  • 相关阅读:
    第二个冲刺 6.3.4.学术诚信与职业道德
    第二个冲刺 Sprint
    css之清除浮动
    style和getComputedStyle(ff)和currentStyle
    php 中间件
    Vue 和 angular
    img 分区响应图
    PHP composer
    php实现文件上传,下载的常见文件配置
    php 命名空间
  • 原文地址:https://www.cnblogs.com/xiaotaiyang/p/3850246.html
Copyright © 2011-2022 走看看