Javascript implements scrolling effect code organization_javascript skills

1. First write the two most commonly used and simple scrolling codes
The codes are as follows:
Horizontal scrolling:
<marquee direction="left" align="bottom" height=" 25" width="100%" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="1">Scroll subtitle content horizontally</marquee>
Vertical scrolling:
<marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollAmount="1" scrollDelay="1">Vertical Scroll text content</marquee>
2. Smooth and uninterrupted scrolling

Copy code Code As follows:

<SCRIPT LANGUAGE="JavaScript">
var tm=null
function newsScroll() {
var scrollimg=document.getElementById("scroll")
if(scrollimg.parentNode.scrollTop!=(scrollimg.clientHeight/2))
scrollimg.parentNode.scrollTop ;
else
scrollimg.parentNode.scrollTop=0
}
window.onload=function() {
tm=setInterval('newsScroll()',25)
}
function stop()
{
clearInterval(tm)
}
function start()
{
tm=setInterval('newsScroll()',25)
}
</SCRIPT>
/* stop() start() cannot be used with The calling ID is in the same container. If the container does not have a default height, the height must be specified*/

3 There is stay scrolling
Code example:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Untitled Document</title> <style type="text/css"> ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} </style> <p> </p> <div id="scrollDiv">Multi-line scrolling demo: <ul> <li> </li> <li>This is the first line of the announcement title</li> <li>This is the second line of the announcement title</li> <li>This is the third line of the announcement title</li> <li>This is the fourth line of the announcement title</li> <li>This is the fifth line of the announcement title</li> <li>This is the sixth line of the announcement title</li> <li>This is the seventh line of the announcement title</li> </ul>This is the eighth line of the announcement title</div> <span id="btn1"> </span> <span id="btn2">Forward</span> Backward