zoukankan      html  css  js  c++  java
  • js左右滚动实例

    <DIV id="demo" style="OVERFLOW: hidden; WIDTH: 50px;">
    <TABLE>
    <TR>
    <TD id="demo1">
    <table width="150">
    <tr>
    <td width="130">1</td>
    <td width="130">2</td>
    <td width="130">3</td>
    <td width="130">4</td>
    <td width="130">5</td>
    <td width="130">6</td>
    <td width="130">7</td>
    <td width="130">8</td>
    <td width="130">9</td>
    <td width="130">10</td>
    <td width="130">11</td>
    <td width="130">12</td>
    <td width="130">13</td>
    <td width="130">14</td>
    <td width="130">15</td>
    </tr>
    </table>
    </TD>
    <td id="demo2"></td>
    </TR>
    </TABLE>
    </DIV>
    <a href="javascript:void(0);" onmouseover="overMar(1);" onmouseout="outMar();">左滚动</a>
    <a href="javascript:void(0);" onmouseover="overMar(0);" onmouseout="outMar();">右滚动</a>
    <script>
    var speed=50//速度数值越大速度越慢
    var MyMar;
    document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML;
    //左移动
    function MarqueeAdd(){
    if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0){
    document.getElementById("demo").scrollLeft=document.getElementById("demo").scrollLeft-document.getElementById("demo1").offsetWidth;
    }else{
    document.getElementById("demo").scrollLeft++;
    }
    }
    //右移动
    function MarqueeDes(){
    if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft>=0){
    document.getElementById("demo").scrollLeft=document.getElementById("demo").scrollLeft+document.getElementById("demo1").offsetWidth;
    }else{
    document.getElementById("demo").scrollLeft--;
    }
    }
    //鼠标画出停止
    function outMar(){
    clearInterval(MyMar);
    }
    //鼠标滑过滚动
    function overMar(jadge){
    if(jadge==0){
    MyMar=setInterval(MarqueeAdd,speed);
    }else{
    MyMar=setInterval(MarqueeDes,speed);
    } 
    }
    
    //MyMar=setInterval(MarqueeAdd,speed);//自动左移动
    //MyMar=setInterval(MarqueeDes,speed);//自动右移动
    </script>
    
    
  • 相关阅读:
    Css时间轴布局_Css时间轴布局案例整理
    Java Efficient data transfer through zero copy
    Interviewing at Amazon — Leadership Principles
    【转】golang 锁使用---里面的读写锁解析
    【转】MySQL GRANT:用户授权
    【转】mysql处理高并发,防止库存超卖
    [转]Character encoding for commit messages
    【转】git tag的用法
    【转】断网后VirtualBox连接不上问题解决
    【转】sql基础left join, inner join, full join , right join 的理解
  • 原文地址:https://www.cnblogs.com/freespider/p/1885164.html
Copyright © 2011-2022 走看看