正文

图片无限滚动2007-09-25 12:16:00

【评论】 【打印】 【字体: 】 本文链接:http://blog.pfan.cn/tiay/29653.html

分享到:

1、图片向左无限滚动====================================================
<div id=demod style=overflow:hidden;height:157;width:714>
          <table align=left cellpadding=0 cellspace=0 border=0>
            <tr>
              <td id=demo7 valign=top>
              <table width='100%' cellpadding='0' cellspacing='5' border='0' align='center'>
                  <tr valign='top'>
                    <td align='left'><img src="http://www.sh7135.net/2006demo/images/default_r1_c4.gif"></td>
                    <td align='left'><img src="http://www.sh7135.net/2006demo/images/default_r1_c4.gif"></td>
                    <td align='left'><img src="http://www.sh7135.net/2006demo/images/default_r1_c4.gif"></td>
                    <td align='left'><img src="http://www.sh7135.net/2006demo/images/default_r1_c4.gif"></td>
                  </tr>
                </table></td>
              <td id=demo8 valign=top></td>
            </tr>
          </table>
        </div>
   <script>
  var speed=30
  demo8.innerHTML=demo7.innerHTML
  function Marquee(){
  if(demo8.offsetWidth-demod.scrollLeft<=0)
  demod.scrollLeft-=demo7.offsetWidth
  else{
  demod.scrollLeft++
  }
  }
  var MyMar=setInterval(Marquee,speed)
  demod.onmouseover=function() {clearInterval(MyMar)}
  demod.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  </script>

2、图片向右无限滚动====================================================
<div id=demod style=overflow:hidden;height:70;width:400>
          <table align=left cellpadding=0 cellspace=0 border=0>
            <tr>
              <td id=demo7 valign=top> <table width='100%' cellpadding='0' cellspacing='5' border='0' align='center'>
                  <tr valign='top'>
                    <td align='left'><img src="http://www.sh7135.net/2006demo/images/default_r1_c4.gif"></td>
                    <td align='left'><img src="http://www.sh7135.net/2006demo/images/default_r1_c4.gif"></td>
                    <td align='left'><img src="http://www.sh7135.net/2006demo/images/default_r1_c4.gif"></td>
                  </tr>
                </table></td>
              <td id=demo8 valign=top></td>
            </tr>
          </table>
        </div>
        <script>
  var speed=30
  demo8.innerHTML=demo7.innerHTML
 demod.scrollLeft=demod.scrollWidth
  function Marquee(){
  if(demod.scrollLeft<=0)
  demod.scrollLeft+=demo8.offsetWidth
  else{
  demod.scrollLeft--
  }
  }
  var MyMar=setInterval(Marquee,speed)
  demod.onmouseover=function() {clearInterval(MyMar)}
  demod.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  </script>

3、图片向上无限滚动
====================================================
<div id=demo style=overflow:hidden;height:160;width:230>
          <div id=demo1>
          <img src="http://www.sh7135.net/2006demo/images/default_r1_c4.gif">
            <img src="http://www.sh7135.net/2006demo/images/default_r1_c4.gif">
            <img src="http://www.sh7135.net/2006demo/images/default_r1_c4.gif">
          </div>
          <div id=demo2></div>
        </div>
        <script>
   var speed=30
   demo2.innerHTML=demo1.innerHTML;
   function Marquee(){
   if(demo2.offsetTop-demo.scrollTop<=0)
   demo.scrollTop-=demo1.offsetHeight;
   else{
   demo.scrollTop++;
   }
   }
   var MyMar=setInterval(Marquee,speed);
   demo.onmouseover=function() {clearInterval(MyMar)};
   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
   </script>

4、图片向下无限滚动====================================================
<div id=demob style=overflow:hidden;height:140;width:230>
          <div id=demo3> <img src="http://www.sh7135.net/2006demo/images/default_r1_c4.gif">
            <img src="http://www.sh7135.net/2006demo/images/default_r1_c4.gif">
            <img src="http://www.sh7135.net/2006demo/images/default_r1_c4.gif">
          </div>
          <div id=demo4></div>
        </div>
        <script>
    var speed=30;
    demo4.innerHTML=demo3.innerHTML;
    demob.scrollTop=demob.scrollHeight;
    function Marquee(){
    if(demo3.offsetTop-demob.scrollTop>=0)
    demob.scrollTop+=demo4.offsetHeight;
    else{
    demob.scrollTop--;
    }
    }
    var MyMar=setInterval(Marquee,speed)
    demob.onmouseover=function() {clearInterval(MyMar)}
    demob.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
    </script>

阅读(3114) | 评论(0)


版权声明:编程爱好者网站为此博客服务提供商,如本文牵涉到版权问题,编程爱好者网站不承担相关责任,如有版权问题请直接与本文作者联系解决。谢谢!

评论

暂无评论
您需要登录后才能评论,请 登录 或者 注册