向上不间断（无缝）滚动图片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
投稿猜你喜欢
平面设计中的文字设计
2009-01-15 12:09:00
MAC系统IDEA颜值插件MaterialThemeUI
2022-12-26 00:29:07
django使用channels实现通信的示例
2023-12-18 01:06:59
vuex数据持久化的两种实现方案
2024-04-30 10:34:48
Python中for循环详解
2021-06-22 18:41:56
Python进程间通信之共享内存详解
2022-01-06 05:47:10
go语言的工作空间和GOPATH环境变量介绍
2024-05-09 10:11:34
Python tkinter中label控件动态改变值问题
2023-09-15 19:27:18
Java连接数据库oracle中文乱码解决方案
2024-01-19 02:48:10
linux系统中重置mysql的root密码
2024-01-14 06:16:45
git中cherry-pick命令的使用教程
2023-02-11 00:33:57
DJANGO-ALLAUTH社交用户系统的安装配置
2022-10-03 11:29:08
python模块的安装以及安装失败的解决方法
2023-09-14 06:33:04
python pytorch图像识别基础介绍
2021-02-02 03:13:13
TypeScript学习之强制类型的转换
2024-04-25 13:08:07
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2023-09-28 13:34:17
封装获取dom元素的简单实例
2024-04-17 09:57:25
使用Python的Django和layim实现即时通讯的方法
2022-05-29 00:41:33
axios 拦截器管理类链式调用手写实现及原理剖析
2023-07-02 16:38:23
Vue.js 的过滤器你了解多少
2024-04-28 09:26:37
