[转]不间断连续图片滚动效果的制作方法(JS)-阿里云开发者社区

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

2007-06-28 1012

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： From: http://x8.maicoo.com/tech/9/225.html以前我们站点也介绍过连续滚动的图片，但缺陷是有间断。如何制作连续不间断的播放滚动呢？请参看制作方法：　　先制作向上滚动的效果：(演示：http://x8.

From: http://x8.maicoo.com/tech/9/225.html

以前我们站点也介绍过连续滚动的图片，但缺陷是有间断。如何制作连续不间断的播放滚动呢？请参看制作方法：
　　先制作向上滚动的效果：(演示： http://x8.maicoo.com/tech/9/225.html)

< 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部分替换成：

< 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 >

< 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 >

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景