Of Stack

Combination of JS and HTML Using marquee Tag to Realize Seamless Scroll Effect Code

  • 2021-07-01 06:40:40
  • OfStack

Recently, I am doing a front-end development project, which needs to achieve seamless scrolling effect, and scroll seamlessly from top to bottom. Below this site to share the implementation of the code to this site platform, the need for friends can refer to the following, there is bug welcome to propose, common learning progress.

The specific code is as follows: 


<!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>1 Row multi-column text loop scroll band pause -</TITLE>
<meta name="keywords" content=" Web special effects " />
<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  Similar to Tencent's picture slide special effects (which can be played automatically) </a>
</li>
<li>
<a href="#/JS" target="_blank">VB Version enhancement Windows Task Manager </a>
</li>
<li>
<a href="#/JS/texiao"target="_blank">JQuery Tip Multi-style link prompt box </a>
</li>
<li>
<a href="#/JS/ad" target="_blank">VC++ Dynamic loading, calling smtp.dll Example of sending mail </a>
</li>
<li>
<a href="#/html+css" target="_blank">++ Lianliankan game source code with plug-in </a>
</li>
<li>
<a href="#/" target="_blank"> Based on API Adj. VB HOOK Hook interceptor </a>
</li>
<li>
<a href="#/" target="_blank">VB  Operating system 1 Some Common Tips Set </a>
</li>
<li>
<a href="#/js" target="_blank">xTree  Standard WEB Menu Tree (Tree Menu) </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>
Related articles: