Marquee 滚动的效果

分手后的思念是犯贱 2022-08-06 03:14 157阅读 0赞

**先制作向上滚动的效果：**  
　　插入代码：

<div id="demo" style="overflow:hidden;height:150px;width:90px;background:\#214984;color:\#ffffff">  
<div id="demo1">  
  
<img src="images/logo\_1.gif">  
<img src="images/logo/flashempire.gif">  
<img src="images/logo.gif">  
<img src="images/logo/5dmedia.gif">  
<img src="images/logo/macromedia.gif">  
<img src="images/logo/sucaiw.gif">  
<img src="images/logo/blueieda.gif">  
<img src="images/logo/htmlcn.gif">  
<img src="images/logo/fwcn.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.οnmοuseοver=function() \{clearInterval(MyMar)\};  
demo.οnmοuseοut=function() \{MyMar=setInterval(Marquee,speed)\};  
</script>

**制作向下滚动的效果：**  
　　将上面“制作向上滚动的效果”中的红色字体Js部分替换成：

**制作向左滚动的效果：**

<div id="demo" style="overflow:hidden;height:33px;width:500px;background:\#214984;color:\#ffffff">  
<table align=left cellpadding=0 cellspace=0 border=0>  
<tr>  
<td id="demo1" valign="top"><img src="images/logo\_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif"><img src="images/logo/fwcn.gif">  
</td>  
<td id="demo2" valign="top"></td>  
</tr>  
</table>  
</div>  
  
<script>  
var speed=30;  
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.οnmοuseοver=function() \{clearInterval(MyMar)\};  
demo.οnmοuseοut=function() \{MyMar=setInterval(Marquee,speed)\};  
</script>

**制作向右滚动的效果：**  
　　将上面“制作向左滚动的效果”中的红色字体Js部分替换成：