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>
    
    
  • 相关阅读:
    如何理解volatile关键字
    Spring 4+JMS+ActiveMQ Example with Annotations
    Spring MVC如何获得客户端IP地址
    PDFBox –如何读取PDF的内容
    Spring MVC 使用Ehcache作为缓存的例子
    自定义了一个data table控件
    Linux基本配置
    位操作学习
    QT——QPainter类详解
    QT——设计文件的和控制类的关联问题
  • 原文地址:https://www.cnblogs.com/freespider/p/1885164.html
Copyright © 2011-2022 走看看