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