js实现简单易用的上下无缝滚动效果
2013-11-10 12:25
661 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <style> *{margin:0;padding:0} #slide{position:absolute;height:300px;width:260px;color:#FA8E93;overflow:hidden;border:1px solid #ccc} #slide p{height:34px;line-height:34px;overflow:hidden} #slide span{float:right} </style> </head> <body> <div id="slide"> <div id="slide1"> <p><span>领取了烈焰双11礼包</span>1、dqx5***</p> <p><span>领取了烈焰双11礼包</span>2、s376***</p> <p><span>领取了街机三国双11礼包</span>3、sdk1***</p> <p><span>领取了烈火战神双11礼包</span>4、说好〃不沋伤</p> <p><span>领取了街机三国双11礼包</span>5、说好〃不沋伤</p> <p><span>领取了烈焰双11礼包</span>6、gao6***</p> <p><span>领取了街机三国双11礼包</span>7、ando***</p> <p><span>领取了街机三国双11礼包</span>8、6813***</p> <p><span>领取了烈焰双11礼包</span>9、lais***</p> </div> <div id=slide2></div> </div> <script> var speed=40 var slide=document.getElementById("slide"); var slide2=document.getElementById("slide2"); var slide1=document.getElementById("slide1"); slide2.innerHTML=slide1.innerHTML function Marquee(){ if(slide2.offsetTop-slide.scrollTop<=0) slide.scrollTop-=slide1.offsetHeight else{ slide.scrollTop++ } } var MyMar=setInterval(Marquee,speed) slide.onmouseover=function(){clearInterval(MyMar)} slide.onmouseout=function(){MyMar=setInterval(Marquee,speed)} </script> </body> </html>
js实现上下无缝滚动效果,代码很简洁。不过css样式上有个需要注意的地方,#slide{position:absolute}。测试发现如果盒子#slide上面还有很多内容的话,滚动效果只会持续一次,不会连续。盒子#slide加上样式position:absolute即可解决。
相关文章推荐
- JS实现图片滚动(无缝、平滑、上下左右滚动)效果
- JS实现的N多简单无缝滚动代码(包含图文效果)
- JS简单实现无缝滚动效果实例
- 简单实现js无缝滚动效果
- 简单实现js间歇或无缝滚动效果
- 原生Js无缝滚动效果的简单实现
- JS实现的N多简单无缝滚动代码(包含图文效果)
- JS图片滚动(无缝、平滑、上下左右滚动)效果
- javascript实现的上下无缝滚动效果
- 原生JS实现简单的无缝自动轮播效果
- JQuery插件Marquee.js实现无缝滚动效果
- JS实现图片无缝滚动效果
- marquee+js实现某个区域的“无缝滚动效果”
- 走马灯效果代码js appendChild实现的无缝滚动
- JS无缝滚动效果实现方法分析
- marquee+js实现某个区域的“无缝滚动效果”
- JS与HTML结合使用marquee标签实现无缝滚动效果代码
- js实现带按钮的上下滚动效果
- (20)JS实现简单的图片向左无缝滚动
- JS简单封装的图片无缝滚动效果示例【测试可用】