搜索:
首页 >> JavaScript >> Javascript特效 >> 向上不间断(无缝)滚动图片js代码

向上不间断(无缝)滚动图片js代码

2007-9-24 作者:天空诚 来源:中国Asp之家 投递文章

滚动图片可以说是做网站经常会遇到的,特别是做企业网站,最常用的像产品展示,图片展示等,滚动的好处是吸引眼球,让人一下就注意到。之前本站发了一个向左不间断(无缝)滚动图片js代码这个是向上的,虽然没有左右滚动使用频率大但是也是会用到的,代码同样那么简单,可以说是一个系列的!

向上不间断(无缝)滚动js代码,把要滚动的内容放入<div id=demo1>放这里</div>。不止支持图片的向上滚动,文字,内嵌网页同样可以放入,呵呵,好用吧!

当你想在一个页面调用多个向上滚动图片时,如果你只是简单的复制一份是不行的,JS会出错,正确的做法是,把里面的ID值换成和上一个滚动区不同的,还有在JS代码中改变变量或函数名如原来是: 

var MyMar=setInterval(Marquee,speed)

就要改为:

  var MyMar2=setInterval(Marquee2,speed)

所有相同的都要改!以确保不和上一个滚动代码冲突。

 <div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff><div id=demo1>
 <a href=http://www.aspxhome.com target=_blank><img src="/images/logo.gif" width=86></a>
 <img src="/flink/20078/2007818145855335.gif" width=86>
 <img src="http://www.chinaz.com/images/logo.gif" width=86>
 <img src="http://www.sinaimg.cn/home/07index/sinahome_ws_009.gif" width=86>
 <img src="http://www.aspxhome.com/images/logo.gif" width=86>
 <img src="http://www.blueidea.com/logo.gif" width=86>
 <img src="http://www.aspxhome.com/images/logo.gif" width=86>
 <img src="http://www.aspxhome.com/images/logo.gif" width=86>
 <img src="http://www.aspxhome.com/images/logo.gif" width=86>
 </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>

这里滚动区的尺寸是:height:100;width:90; 你可以自己修改为你要的值。

支持firefox浏览器
[提示:你可先修改部分代码,再按运行]

注:滚动源代码作者不详

 

Tags:向上  滚动  图片 
相关文章
手机版 Javascript特效 Asp之家 Aspxhome.com
闽ICP备06017341号