最近在做一个前端开发的项目，需要实现无缝滚动效果，上下左右无缝滚动。下面小编把实现代码分享到查字典教程网平台，需要的朋友可以参考下，有bug欢迎提出，共同学习进步。
具体代码如下所示：
<!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 />' + $('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>
以上所述是小编给大家介绍的JS与HTML结合使用marquee标签实现无缝滚动效果代码，希望对大家有所帮助，如果大家有任何疑问请给我们留言，小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持！