JS与HTML结合使用marquee标签实现无缝滚动效果代码
具体代码如下所示:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>一行多列文字循环滚动带停顿-</TITLE> <meta name="keywords" content="网页特效" /> <meta name="description" content="" /> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <style type="text/css"> ul {height:200px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px } #announcement { width:300px; height:200px; background:url(img/menu_bg.gif) repeat; overflow: hidden; } #announcement div { border: #e6e6e6 1px solid; padding:0px 10px 0px 10px; overflow-y:hidden; line-height: 24px; height:100px; } #announcement li { font-size: 12px; float: left; list-style-type: none; margin-right: 20px; padding-left: 10px; background: url(img/arrow_right.gif) no-repeat 0px 50%; white-space: nowrap } #announcement a { text-decoration: none; } #announcement a:hover { text-decoration:underline; } </style> </HEAD> <BODY> <DIV id="announcement" onMouseOver="if(!anncount) {clearTimeout(annst);annst = 0}" onMouseOut="if(!annst) annst = setTimeout('announcementScroll()', anndelay);"> <DIV id="scrbody"> <ul> <li> <a href="#" target="_blank">jQuery 类似腾讯网的图片幻灯特效(可自动播放)</a> </li> <li> <a href="#/JS" target="_blank">VB版增强型Windows任务管理器</a> </li> <li> <a href="#/JS/texiao"target="_blank">JQuery Tip多风格链接提示框</a> </li> <li> <a href="#/JS/ad" target="_blank">VC++动态加载、调用smtp.dll发邮件示例</a> </li> <li> <a href="#/html+css" target="_blank">++连连看游戏源码附外挂</a> </li> <li> <a href="#/" target="_blank">基于API的VB HOOK钩子拦截程序</a> </li> <li> <a href="#/" target="_blank">VB 操作系统的一些常用小技巧集</a> </li> <li> <a href="#/js" target="_blank">xTree 标准的WEB菜单树(树形菜单)</a> </li> </ul> </DIV> </DIV> <script type="text/javascript"> function $(id) { return document.getElementById(id); } var anndelay = 3000; var anncount = 0; var annheight = 24; var annst = 0; function announcementScroll() { if( ! annst) { $('scrbody').innerHTML += '<br style="clear: both" />' + $('scrbody').innerHTML; $('scrbody').scrollTop = 0; if($('scrbody').scrollHeight > annheight * 3) { annst = setTimeout('announcementScroll()', anndelay); } else { $('announcement').onmouseover = $('announcement').onmouseout = null; } return; } if(anncount == annheight) { if($('scrbody').scrollHeight - annheight <= $('scrbody').scrollTop) { $('scrbody').scrollTop = $('scrbody').scrollHeight / 2 - annheight; } anncount = 0; annst = setTimeout('announcementScroll()', anndelay); } else { $('scrbody').scrollTop ++ ; anncount ++ ; annst = setTimeout('announcementScroll()', 10); } } announcementScroll(); </script> </BODY> </HTML>
相关推荐
gufudhn 2020-06-06
nercon 2020-06-02
88274956 2020-11-03
runner 2020-09-01
梦的天空 2020-08-25
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
lyqdanang 2020-08-16
MyNameIsXiaoLai 2020-07-08
星辰的笔记 2020-07-04
csstpeixun 2020-06-28
letheashura 2020-06-26
liaoxuewu 2020-06-26
sunzhihaofuture 2020-06-21
FEvivi 2020-06-16
坚持着执着 2020-06-16
waterv 2020-06-14
xiaoge00 2020-06-14
firejq 2020-06-14
firstboy0 2020-06-14
e度空间 2020-06-12