做网站经常要用到图像的滚动效果，而传统的marquee标签无法实现无间隙滚动。只能使用js脚本来替代。现在总结了一下四个方向的滚动js脚本。

学j76网7IB页hR55e网(http://www.xwangye.com)

向上滚动代码

以下是代码片段：
 <div id=demo style=overflow:hidden;height:200;width:90;background:#214984;color:#ffffff>
 <div id=demo1>
 <img src="http://www.xwangye.com/UpLoadFiles/2008-10/2008101908312453171.jpg" width=88>
 <img src="http://www.xwangye.com/UpLoadFiles/2008-10/2008101908312366706.jpg" width=88>
 <img src="http://www.xwangye.com/UpLoadFiles/2008-10/2008101908312377588.jpg" width=88>
 </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>

学j76网7IB页hR55e网(http://www.xwangye.com)

向下滚动代码

以下是代码片段：
<div id=demo style=overflow:hidden;height:200;width:90;background:#214984;color:#ffffff>
 <div id=demo1>
 <img src="http://www.xwangye.com/UpLoadFiles/2008-10/2008101908312453171.jpg" width=88>
 <img src="http://www.xwangye.com/UpLoadFiles/2008-10/2008101908312366706.jpg" width=88>
 <img src="http://www.xwangye.com/UpLoadFiles/2008-10/2008101908312377588.jpg" width=88>
 </div>
 <div id=demo2></div>
 </div>
 <script>
 var speed=30
 demo2.innerHTML=demo1.innerHTML
 demo.scrollTop=demo.scrollHeight
 function Marquee(){
 if(demo1.offsetTop-demo.scrollTop>=0)
 demo.scrollTop+=demo2.offsetHeight
 else{
 demo.scrollTop--
 }
 }
 var MyMar=setInterval(Marquee,speed)
 demo.onmouseover=function() {clearInterval(MyMar)}
 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
 </script>

学j76网7IB页hR55e网(http://www.xwangye.com)

向左滚动代码

以下是代码片段：
<div id=demo style=overflow:hidden;height:45;width:200;background:#214984;color:#ffffff>
 <table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
 <img src="http://www.xwangye.com/UpLoadFiles/2008-10/2008101908312453171.jpg" height=40>
 <img src="http://www.xwangye.com/UpLoadFiles/2008-10/2008101908312366706.jpg" width=40>
 <img src="http://www.xwangye.com/UpLoadFiles/2008-10/2008101908312377588.jpg" width=40>
</td>
<td id=demo2 valign=top></td></tr></table></div>
 <script>
 var speed=30
 demo2.innerHTML=demo1.innerHTML
 demo.scrollLeft=demo.scrollWidth
 function Marquee(){
 
 if(demo2.offsetLeft-demo.scrollLeft<=0)
 demo.scrollLeft-=demo2.offsetWidth
 else{
 demo.scrollLeft++
 }
 }
 var MyMar=setInterval(Marquee,speed)
 demo.onmouseover=function() {clearInterval(MyMar)}
 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
 </script>

学j76网7IB页hR55e网(http://www.xwangye.com)

向右滚动代码

以下是代码片段：
<div id=demo style=overflow:hidden;height:45;width:200;background:#214984;color:#ffffff>
 <table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
  <img src="http://www.xwangye.com/UpLoadFiles/2008-10/2008101908312453171.jpg" height=40>
 <img src="http://www.xwangye.com/UpLoadFiles/2008-10/2008101908312366706.jpg" width=40>
 <img src="http://www.xwangye.com/UpLoadFiles/2008-10/2008101908312377588.jpg" width=40>
</td>
<td id=demo2 valign=top></td></tr></table></div>
 <script>
 var speed=30
 demo2.innerHTML=demo1.innerHTML
 demo.scrollLeft=demo.scrollWidth
 function Marquee(){
 if(demo.scrollLeft<=0)
 demo.scrollLeft+=demo2.offsetWidth
 else{
 demo.scrollLeft--
 }
 }
 var MyMar=setInterval(Marquee,speed)
 demo.onmouseover=function() {clearInterval(MyMar)}
 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
 </script>

学j76网7IB页hR55e网(http://www.xwangye.com)