网络编程
位置：首页>> 网络编程>> JavaScript>> 向上不间断（无缝）滚动图片js代码

向上不间断（无缝）滚动图片js代码

　来源：asp之家　发布时间：2007-09-24 20:22:00　

标签：向上,滚动,图片

滚动图片可以说是做网站经常会遇到的，特别是做企业网站，最常用的像产品展示，图片展示等，滚动的好处是吸引眼球，让人一下就注意到。之前本站发了一个向左不间断（无缝）滚动图片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="https://www.aspxhome.com/images/logo.gif" width=86>
 <img src="http://www.blueidea.com/logo.gif" width=86>
 <img src="https://www.aspxhome.com/images/logo.gif" width=86>
 <img src="https://www.aspxhome.com/images/logo.gif" width=86>
 <img src="https://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浏览器

注：滚动源代码作者不详

 

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com