向上不间断(无缝)滚动图片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
投稿

猜你喜欢

  • HTML在线编辑器任意设置字号大小

    2007-08-29 19:55:00
  • 服务器响应HTTP的类型ContentType大全

    2007-10-23 10:21:00
  • XPath 1.0 学习笔记

    2009-02-25 12:19:00
  • 公用样式模板的设计制作

    2009-09-13 21:27:00
  • 自动生成sql语句

    2008-05-09 12:42:00
  • 关闭窗口时保存数据的办法

    2009-02-19 13:39:00
  • asp如何从数据库中删除废旧的电子信箱地址?

    2009-11-15 20:04:00
  • Html的几个小技巧

    2011-04-29 14:02:00
  • MS SQL7.0的数据迁移到MySQL上的一种方法

    2008-11-01 16:59:00
  • 细化解析:SQL Server 2000 的各种版本

    2009-02-05 15:41:00
  • 如何取得服务器上的用户组列表?

    2010-01-18 20:54:00
  • 人性化设计用文字注入情感

    2007-08-22 08:59:00
  • ASP Recordset 分页显示数据的方法(修正版)

    2011-04-10 10:42:00
  • Rel与CSS的联合使用

    2010-02-20 13:03:00
  • mysql myisam 优化设置

    2010-03-25 10:18:00
  • 把网页中的(电话,qq等数字)生成图片的ASP程序

    2011-04-11 10:40:00
  • 如何使用 SQL Server 数据库查询累计值

    2008-12-03 15:27:00
  • 浏览器tab的设计

    2008-08-11 13:03:00
  • 空行不空格式排版组织原理

    2010-05-03 14:46:00
  • Access与Flash的结合应用

    2008-11-20 16:44:00
  • asp之家 网络编程 m.aspxhome.com