Home > Developer > JavaScript
1. First write the two most commonly used and concise scrolling code
The Code is as follows:
Horizontal scroll:
<Marquee direction = "left" align = "bottom" height = "25" width = "100%" onmouseout = "this. start () "onmouseover =" this. stop () "scrollamount =" 2 "scrolldelay =" 1 "> horizontal scrolling subtitle content </marquee>
Vertical scroll:
<Marquee direction = "up" height = "200" onmouseout = "this. start () "onmouseover =" this. stop () "scrollAmount =" 1 "scrollDelay =" 1 "> vertical scroll content </marquee>
2. smooth and uninterrupted Rolling
Copy codeThe Code is 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 in the same container as the call ID. If the container does not have the default height, set the height */
3. Rolling
Sample Code:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <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> </pead> <body> <p> multi-row scrolling Demonstration: </p> <ul> <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 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 title of the announcement row 6 </li> <li> This is the seventh row of the announcement title </li> <li> This is the eighth row of the announcement title </li> </ul> forward and backward </ body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
4: a simple example of rolling code learning and Production
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <title> uninterrupted scrolling effect </title> <meta http-equiv = "content-type" content = "text/html; charset = gb2312 "> <style type =" text/css ">. scroll {height: 20px; overflow: hidden; font-size: 12px; line-height: 20px; border: # A5A5A5 1px dotted; width: 120px; margin: 0px auto; text-align: center ;} </style> </pead> <body> Beijing | Shanghai | Guang Zhou | Xi 'an | Nan Jing | Dalian | Harbin | Wu Han </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Js Code Description:
JavaScript code:
Copy codeThe Code is as follows:
Var s, sn = 0, timer, slen, timer2;
// Initialization settings
Function scrollInit (){
S = getid ("s1"); // obtain the object for scrolling content
S. scrollTop = 0; // initialize the scroll position
Slen = s. innerHTML. split ("|"); // obtain the scrolling content and store it in an array to display the call
S. innerHTML = ""; // clear the scrolling object content
For (var I = 0; I <slen. length; I ++) {s. innerHTML + = (slen [I] + "<br/>");} // format the output scroll content
S. innerHTML + = slen [0];
Timer2 = setInterval (scrollstart, 3000); // Start scrolling
S. onmouseover = function () {clearInterval (timer2); clearInterval (timer); s. style. backgroundColor = "# ccc" ;}// move the cursor over, stop scrolling, and change the style
S. onmouseout = function () {timer2 = setInterval (scrollstart, 3000); s. style. backgroundColor = "# fff" ;}// move the mouse away to restore the scroll
}
// Enable the scroll Effect
Function scrollstart (){
If (s. scrollTop> = (slen. length * 20) {s. scrollTop = 0;} // reset the content position when scrolling the content to the end.
Timer = setInterval (scrollexec, 30); // execute the scroll animation effect
}
// Scroll animation effect
Function scrollexec (){
If (sn <20 ){
Sn ++;
S. scrollTop ++;
} Else {
Sn = 0;
ClearInterval (timer );
}
}
// Obtain the object by ID
Function getid (id) {return document. getElementById (id );}
// Initialize the webpage after loading.
Window. onload = scrollInit;
Principle Analysis:
1. First, set the height or width for the container, such as div, and set the div height to 20px; overflow: hidden;
2. After the container height is set, the height of the content exceeds 20px, and some overflow exceeded and hidden. The scrollTop attribute is available. You can use overflow: scroll to view the effect;
3. Change the value of the scrollTop or scrollLeft attribute of the container to move the content to the position (the principle of scrolling );
4. When scrollTop is greater than or equal to the height of the content, set scrollTop to 0 to let the content return to the original position and start rolling again. The effect of uninterrupted loop rolling is displayed.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
