方框内持续循环向上滚动的文字，响应鼠标停止

发布时间：2018-08-13 15:34 所属栏目：121 来源：站长网

导读：方框（层）内持续循环向上滚动的文字特效，当我们把鼠标经过这个区域时文字滚动就会停止了。另外，文字内是可以加链接的，这个就看个人的需要了，CSS水平好的话，还可以继续完善。演示： !DOCTYPE htmlhtmlheadtitle/titlemeta charset=gbk/style type=te

　　方框（层）内持续循环向上滚动的文字特效，当我们把鼠标经过这个区域时文字滚动就会停止了。另外，文字内是可以加链接的，这个就看个人的需要了，CSS水平好的话，还可以继续完善。

　　演示：

<!DOCTYPE html> <html> <head> <title></title> <meta charset="gbk"/> <style type="text/css"> .marquee { position: relative; width: 490px; height: 70px; overflow: hidden; border: 10px solid #369; } .marquee img { display: block; } .marquee dd { margin: 0px; padding: 0px; } </style> <script type="text/javascript"> var Marquee = function(id){ var container = document.getElementById(id), original = container.getElementsByTagName("dt")[0], clone = container.getElementsByTagName("dd")[0], speed = 10; clone.innerHTML = original.innerHTML; var rolling = function(){ if (container.scrollTop == clone.offsetTop) { container.scrollTop = 0; } else { container.scrollTop++; } } var timer = setInterval(rolling, speed)//设置定时器 container.onmouseover = function(){ clearInterval(timer) }//鼠标移到marquee上时，清除定时器，停止滚动 container.onmouseout = function(){ timer = setInterval(rolling, speed) }//鼠标移开时重设定时器 } window.onload = function(){ Marquee("marquee"); } </script> </head> <body> <dl id="marquee" class="marquee"> <dt> 烈火网（veryhuo.com）以提供计算机知识、网站运营、软件应用、设计教程、编程开发与IT资讯等为主要宗旨，同时有源码下载、站长工具、在线手册、免费资源等内容，是国内快捷易懂、内容丰富的站长学习和交流平台。</dt> <dd> </dd> </dl> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：ASP站长网）