[转]不间断连续图片滚动效果的制作方法

[入库:2005年8月18日] [更新:2007年3月25日]

本文简介:选择自 liujun999999 的 blog

  先制作向上滚动的效果:
  插入代码:
<!-- 指向链接图片url -->
<base href="http://www.it365cn.com">
<div id=demo style=overflow:hidden;height:150;width:90;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.onmouseover=function() {clearinterval(mymar)}
demo.onmouseout=function() {mymar=setinterval(marquee,speed)}
</script>


  制作向下滚动的效果:
  将上面“制作向上滚动的效果”中的红色字体js部分替换成:
<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>

  制作向左滚动的效果:
<base href="http://www.it365cn.com">
<div id=demo style=overflow:hidden;height:33;width:500;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.onmouseover=function() {clearinterval(mymar)}
demo.onmouseout=function() {mymar=setinterval(marquee,speed)}
</script>


  制作向右滚动的效果:
  将上面“制作向左滚动的效果”中的红色字体js部分替换成:
<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>

  制作的方法就简单的介绍完成了。

本文关键:[转]不间断连续图片滚动效果的制作方法
  相关方案
Google
 

本站最佳浏览方式为 分辨率 1024x768 IE 6.0(或更高版本的 IE浏览器)

go top