JS与HTML结合使用marquee标签实现无缝滚动效果代码
最近在做一个前端开发的项目，需要实现无缝滚动效果，上下左右无缝滚动。下面小编把实现代码分享到毛票票平台，需要的朋友可以参考下，有bug欢迎提出，共同学习进步。
具体代码如下所示：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>一行多列文字循环滚动带停顿-</TITLE>
<metaname="keywords"content="网页特效"/>
<metaname="description"content=""/>
<METAhttp-equiv=Content-Typecontent="text/html;charset=utf-8">
<styletype="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;
}
#announcementdiv{
border:#e6e6e61pxsolid;
padding:0px10px0px10px;
overflow-y:hidden;
line-height:24px;
height:100px;
}
#announcementli{
font-size:12px;
float:left;
list-style-type:none;
margin-right:20px;
padding-left:10px;
background:url(img/arrow_right.gif)no-repeat0px50%;
white-space:nowrap
}
#announcementa{
text-decoration:none;
}
#announcementa:hover{
text-decoration:underline;
}
</style>
</HEAD>
<BODY>
<DIVid="announcement"onMouseOver="if(!anncount){clearTimeout(annst);annst=0}"onMouseOut="if(!annst)annst=setTimeout('announcementScroll()',anndelay);">
<DIVid="scrbody">
<ul>
<li>
<ahref="#"target="_blank">jQuery类似腾讯网的图片幻灯特效（可自动播放）</a>
</li>
<li>
<ahref="#/JS"target="_blank">VB版增强型Windows任务管理器</a>
</li>
<li>
<ahref="#/JS/texiao"target="_blank">JQueryTip多风格链接提示框</a>
</li>
<li>
<ahref="#/JS/ad"target="_blank">VC++动态加载、调用smtp.dll发邮件示例</a>
</li>
<li>
<ahref="#/html+css"target="_blank">++连连看游戏源码附外挂</a>
</li>
<li>
<ahref="#/"target="_blank">基于API的VBHOOK钩子拦截程序</a>
</li>
<li>
<ahref="#/"target="_blank">VB操作系统的一些常用小技巧集</a>
</li>
<li>
<ahref="#/js"target="_blank">xTree标准的WEB菜单树（树形菜单）</a>
</li>
</ul>
</DIV>
</DIV>
<scripttype="text/javascript">
function$(id)
{
returndocument.getElementById(id);
}
varanndelay=3000;
varanncount=0;
varannheight=24;
varannst=0;
functionannouncementScroll()
{
if(!annst)
{
$('scrbody').innerHTML+='<brstyle="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>
以上所述是小编给大家介绍的JS与HTML结合使用marquee标签实现无缝滚动效果代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！