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>
    
    
  • 相关阅读:
    Hadoop与hbase单机环境安装
    Hive集成Hbase
    正确搭建hbase完全分布式集群(二)
    正确搭建hbase完全分布式集群(一)
    zookeeper 及 独立hbase 的安装与配置
    sqoop安装及导入sqlserver数据
    hadoop+hive+sqoop安装笔记
    如何正确安装mysql 8
    安装nginx为windows服务
    python web编程之django post请求
  • 原文地址:https://www.cnblogs.com/freespider/p/1885164.html
Copyright © 2011-2022 走看看