![](https://i-blog.csdnimg.cn/blog_migrate/d05662d9d489f4b8d61ceb0b397a322f.png)
HTML部分:
定义一个相同的父元素top_banner,里边包含两个子元素 dome1和dome2
dome1里设置<ul> <li> marquee的内容样式或者图片</li>...... </ul>
dome2为空的div
css部分:
给定父元素的宽和高overflow:hidden, 给定dome1里 li的宽和高 dome2没有样式
JS部分:
声明这个跑马灯的速度 speed=50;
接下来需要定义这个函数 function Marquee(){
if(dome2.offsetTop-top_banner.scrollTop<=0){ top_banner.scrollTop -= dome1.offsetHeight; }
else{ top_banner.scrollTop++ ; }
}
var myMar=setInterval(Marquee,speed);
top_banner.οnmοuseοver=function(){ clearInterval(myMar) };
top_banner.οnmοuseοut=function(){ myMar=setInterval(Marquee,speed) };
用到的知识点: .offsetTop .scrollTop .offsetHeight setInterval clearInterval
1 .offsetTop 该方法 返回或设置匹配元素相对于文档的偏移(位置)。
2 .scrollTop 该方法 返回不加() 或 设置匹配元素的滚动条的垂直位置。 设置需要在后边加 (值)
3 .offsetHeight offsetHeight与offsetWidth作用相同,前者是获取元素的高度后者则是宽度.offsetHeight属性可以获取元素的可见高度值
4 setInterval 该方法 可以按照指定的周期(时间,毫秒计算)来不停的调用某个函数或者计算表达式
直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
5 clearInterval 该方法 可取消由 setInterval() 设置的 timeout 参数必须是由 setInterval() 返回的 ID 值。