Js间断/连续的文字滚动代码
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>
一、推荐使用迅雷或快车等多线程下载软件下载本站资源。
二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。
三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!
四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.
五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。
六、如需转载本站资源,请注明转载来自并附带链接
七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com
大家评论
站长推荐
点击排行
- 1CSS控制文字在Div最底部显示
- 2Thinkphp5如何配置IP+端口访问项目模块
- 3elementUI el-dialog弹框居中
- 4教你如何搭建及优化站点
- 5国内互联网视频行业运营分析
- 6service mysql start出错,mysql不能启动,解决mysql: unrecognized service错误
- 7CSS实现悬浮顶部的Div工具栏
- 8记一次Thinkphp5.1框架mysql数据库崩溃(SQLSTATE [08004] Too many connections)
- 9连接SQL Server数据库提示:Login failed for user 'sa'错误的解决方案
- 10Thinkphp3.2在centos7上设置计划任务的方法