-
Js文字滚动代码，可设置间断滚动和连续滚动。滚动时是向上滚动的，控制Li列表滚动，兼容性表现地不错，兼容IE/火狐、Opera等浏览器，代码如下：前端框架分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>文字间隔滚动代码-兼容IE和FireFox</title> <style type="text/css"> <!-- body { text-align:center; } ul{ margin:0px; padding:0px; list-style:none; } #andyscroll { overflow: hidden; background: #E8F8F8; padding: 0 10px; text-align: left; width:400px; height:100px; overflow:hidden; } #andyscroll a { font:12px/18px tahoma; color: #000; float:left; width:100%; text-decoration: none; display:block; } #andyscroll a:hover { font:12px/18px tahoma; color: #F60; } --> </style> </head> <body> <div id="andyscroll"> <div id="scrollmessage"> <UL> <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li> <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li> <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li> <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li> <li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li> <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li> <li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li> <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li> <ul> </div> </div> <script type="text/javascript"> var stopscroll = false; var scrollElem = document.getElementById("andyscroll"); var marqueesHeight = scrollElem.style.height; scrollElem.onmouseover = new Function('stopscroll = true'); scrollElem.onmouseout = new Function('stopscroll = false'); var preTop = 0; var currentTop = 0; var stoptime = 0; var leftElem = document.getElementById("scrollmessage"); scrollElem.appendChild(leftElem.cloneNode(true)); init_srolltext(); function init_srolltext(){ scrollElem.scrollTop = 0; setInterval('scrollUp()', 35);//确定滚动速度的, 数值越小, 速度越快 } function scrollUp(){ if(stopscroll) return; currentTop += 1; //设为1, 可以实现间歇式的滚动; 设为2, 则是连续滚动 if(currentTop == 19) { stoptime += 1; currentTop -= 1; if(stoptime == 180) { currentTop = 0; stoptime = 0; } }else{ preTop = scrollElem.scrollTop; scrollElem.scrollTop += 1; if(preTop == scrollElem.scrollTop){ scrollElem.scrollTop = 0; scrollElem.scrollTop += 1; } } } </script> </body> </html>
浏览 8405 次
|
锁定老帖子 主题：Js间断/连续的文字滚动代码
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2014-08-05
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2014-08-07
翻滚吧，小蚊子
|
| 返回顶楼 | |
