zoukankan      html  css  js  c++  java
  • 图片从右往左无间隙滚动代码

    <div class="rollBox" id="demo" style="overflow:hidden; height:77px; 700px; color:#ffffff; ">
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr align="center">
    <td id="demo1">
    <table border="0" align="center" cellpadding="6px" cellspacing="0">
    <tr>
    <td align="center">
     <a href="show.aspx?id=67&cid=21" target="_blank"><img src="image/old1.jpg" alt="" width="150" height="80" /></a>
     </td>
     <td> <a href="show.aspx?id=68&cid=21" target="_blank"><img src="image/old2.jpg" alt="" width="150" height="80" /></a></td>
      <td> <a href="show.aspx?id=69&cid=21" target="_blank"><img src="image/old3.jpg" alt="" width="150" height="80" /></a></td>
       <td> <a href="show.aspx?id=70&cid=21" target="_blank"><img src="image/old4.jpg" alt="" width="150" height="80" /></a></td>
        <td> <a href="show.aspx?id=71&cid=21" target="_blank"><img src="image/old5.jpg" alt="" width="150" height="80" /></a></td>
    </tr>
    </table>
    </td>
    <td id="demo2"></td>
    </tr>
    </table>
    </div>
     
    <SCRIPT language="javascript" defer>
    function GetObj(objName)
    {
     if(document.getElementById)
     {
      return eval('document.getElementById("'+objName+'")');
     }
     else
     {
      return eval('document.all.'+objName);
     }
    }
     
    var rollSpeed = 15;//速度数值越大速度越慢
    var rollStep  = 1; //滚动步长
    var rollLeft  = true; //往左滚动
     
    GetObj("demo2").innerHTML=GetObj("demo1").innerHTML;
     
    function Marquee()
    {
        if(rollLeft)
     {
      if(GetObj("demo").scrollLeft>=GetObj("demo1").offsetWidth)
      {
       GetObj("demo").scrollLeft-=GetObj("demo1").offsetWidth;
      }
      else
      {
       GetObj("demo").scrollLeft+=rollStep;
      }
     }
     else
     {
      if(GetObj("demo").scrollLeft<=0)
      {
       GetObj("demo").scrollLeft+=GetObj("demo1").offsetWidth;
      }
      else
      {
       GetObj("demo").scrollLeft-=rollStep;
      }
     }
    }
     
    function MarqueeLeft_ON()
    {
        rollLeft = true;
     rollStep = 20;
    }
     
    function MarqueeLeft_OFF()
    {
        rollStep = 1;
    }
     
    function MarqueeRight_ON()
    {
        rollLeft = false;
     rollStep = 20;
    }
     
    function MarqueeRight_OFF()
    {
        rollStep = 1;
    }
     
    var MyMar=setInterval(Marquee,rollSpeed);
    GetObj("demo").onmouseover=function() {clearInterval(MyMar);}
    GetObj("demo").onmouseout=function() {MyMar=setInterval(Marquee,rollSpeed);}
    </SCRIPT>

  • 相关阅读:
    第二章 怎样培养好习惯
    十六、使用jQuery操作元素 —— DOM属性与HTML元素属性
    第六章 培养感恩的习惯
    js 问题集锦 之 二
    HTML 5 学习笔记之 常用标签简介
    MySql 笔记一 之 时间和日期函数
    HTML 5 学习笔记之 canvas 标签
    MySql 笔记三 循环语句
    转载文:架构经验系列文章
    MySql 笔记二 基础命令
  • 原文地址:https://www.cnblogs.com/liuzhengliang/p/2824576.html
Copyright © 2011-2022 走看看