"该资源提供了一段JavaScript代码,用于实现网页中图片的不间断滚动效果。通过设置CSS样式和JavaScript函数,使得多张图片在指定的容器内循环滚动,当鼠标悬停时停止滚动,移开鼠标后恢复滚动。" 本文将详细解释这段代码的工作原理及其涉及的关键知识点。 首先,HTML部分创建了一个`<div>`元素,设置了`id`为`demo`,并应用了`overflow:hidden;`、`height`和`width`等CSS样式,用于限制显示区域并隐藏超出部分的内容。在这个`<div>`内部,有一个`<table>`结构,包含两个`<td>`单元格,其中一个`<td>`(id为`demo1`)包含了要滚动的图片,而另一个`<td>`(id为`demo2`)为空,用于辅助实现滚动效果。 接着是JavaScript部分,定义了几个关键变量和函数: 1. `speed=30`:设置滚动速度,数值越小滚动越快。 2. `demo2.innerHTML=demo1.innerHTML`:将`demo1`中的内容复制到`demo2`,这是实现无缝滚动的基础。 3. `Marquee`函数:这是实际执行滚动操作的函数。它检查`demo2`的偏移宽度是否小于等于`demo`的`scrollLeft`值,如果是,则将`scrollLeft`减去`demo1`的宽度,实现向左滚动的效果;否则,每次增加`scrollLeft`的值,模拟持续滚动的视觉效果。 4. `MyMar`:这是一个定时器,用于定时调用`Marquee`函数,实现连续滚动。 5. `demo.onmouseover`和`demo.onmouseout`事件处理函数:当鼠标悬停在`demo`上时,清除定时器,停止滚动;鼠标移开时,重新设置定时器,恢复滚动。 整个代码的核心机制在于利用`scrollLeft`属性控制`<div>`的水平滚动位置,配合`setTimeout`或`setInterval`实现平滑滚动,以及通过监听鼠标事件控制滚动的启停,从而实现不间断且交互友好的图片滚动效果。这种效果在网站中常见于新闻轮播、广告展示等场景,能有效吸引用户注意力。
<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="http://www.makewing.com/lanren/jscode/js-0063/images/01.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/03.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/04.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/05.jpg"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
JS不间断向右滚动
<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="http://www.makewing.com/lanren/jscode/js-0063/images/01.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/03.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/04.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/05.jpg"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
JS不间断向上滚动
<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><div id=demo1>
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/01.jpg">
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg">
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/03.jpg">
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/04.jpg">
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/05.jpg">
</div>
<div id=demo2></div>
</div>
<script>
var speed=50
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)}
剩余7页未读,继续阅读
- 粉丝: 0
- 资源: 7
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦