您的位置:首页 > 产品设计 > UI/UE

marquee制作连续不间断滚动图片效果

2010-10-13 15:11 585 查看
<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. {clearInterval(MyMar)}

demo. {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. {clearInterval(MyMar)}

demo. {MyMar=setInterval(Marquee,speed)}

</script>

制作向左滚动的效果:

<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. {clearInterval(MyMar)}

demo. {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. {clearInterval(MyMar)}

demo. {MyMar=setInterval(Marquee,speed)}

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息