首页 | IT新闻 | 硬件 | 操作系统 | 开发 | 网络编程 | 数据库 | 热门框架 | 网络安全 | 组网 | 建站指南 | 网页制作 | 特效 | 实用技巧 | 服务器 | 办公 | QQ | 探索 | 社区

  • 技术部落
  • 部落首页 > 网页特效 > 正文
  • 图片无缝滚动效果的实现
      2007-5-21  来源:技术部落  编辑:Jsbulo  热度:

      图片无缝循环滚动的效果实现方法如下:

    <DIV id=demo style="OVERFLOW: hidden; WIDTH: 751px; HEIGHT: 127px">
              <TABLE border=0 cellPadding=0 cellspacing="0"
                                  cellspace="0">
                <TBODY>
                  <TR>
                    <TD id=demo1 vAlign=top><TABLE cellSpacing=0 cellPadding=0 align=center
                                    border=0>
                        <TBODY>
                          <TR>
                             <TD><a href=http://www.jsbulo.com"  target=_blank><img height=127 hspace=6 src="image/123.jpg" border=0></a></TD>
            ……
                             <TD><a href=http://www.jsbulo.com"  target=_blank><img height=127 hspace=6 src="image/1234567890.jpg" border=0></a></TD>
                          </TR>
                        </TBODY>
                    </TABLE></TD>
                    <TD id=demo2 vAlign=top></TD>
                  </TR>
                </TBODY>
              </TABLE></DIV>
            <SCRIPT>
      var speed=25
      demo2.innerHTML=demo1.innerHTML
      function Marquee(){
      if(demo2.offsetWidth-demo.scrollLeft<=0)
      demo.scrollLeft-=demo1.offsetWidth
      else{
      demo.scrollLeft++
      }
      }
      var MyMar=setInterval(Marquee,speed)
      demo.onmouseover=function() {clearInterval(MyMar)}
      demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</SCRIPT>

    相关链接