Home > Developer > JavaScript
The content is continuously rolled to the left, which is equivalent to moving the scroll bar to the right and scrolling the content to the left.
Key Aspect 1: scrollLeft
Use: id. scrollLeft
For example, in the following simple example, when the text is scroll to the left, you can see that the scroll bar is moving to the right.
Key Aspect 2: setInterval
Use: var timer = setInterval (func, 100 );
The interval at which the task is executed.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Style>
Body, div {margin: 0; padding: 0 ;}
. Wrapper {width: 200px; height: 50px; line-height: 30px; overflow-x: scroll; overflow-y: hidden; border: 1px solid # ccc ;}
. W1 {width: 400px ;}
</Style>
</Head>
<Body>
<Div id = "s" class = "wrapper">
<Div class = "w1"> content 1 content 2 content 3 content 4 content 5 content 6 content 7 </div>
</Div>
<Script>
Function scroll (){
Var a = document. getElementById ("s ");
A. scrollLeft ++;
}
Var timer = setInterval (scroll, 50 );
</Script>
</Body>
</Html>
Copy code
Key Aspect 3: The visible width of the offsetWidth object, including the same edge line of the scroll bar, will change with the display size of the window
Key Aspect 4: innerHTML setting or obtaining HTML in the object's start and end tags
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Style>
Body, div {margin: 0; padding: 0 ;}
Body {padding: 20px ;}
# Box {width: 300px; height: 50px; line-height: 30px; overflow-x: scroll; overflow-y: hidden; border: 1px solid # ccc ;}
# C {width: 800px ;}
# C1, # c2 {width: 400px; float: left ;}
</Style>
</Head>
<Body>
<Div id = "box">
<Div id = "c">
<Div id = "c1"> content 1 content 2 content 3 content 4 content 5 content 6 content 7 </div>
<Div id = "c2"> </div>
</Div>
</Div>
<Script>
Var c1 = document. getElementById ("c1 ");
Var c2 = document. getElementById ("c2 ");
C2.innerHTML = c1.innerHTML;
Function scroll (){
Var a = document. getElementById ("box ");
If (a. scrollLeft> = c2.offsetWidth ){
A. scrollLeft = 0;
} Else {
A. scrollLeft ++;
}
}
Var timer = setInterval (scroll, 60 );
</Script>
</Body>
</Html>
Copy code
Note:
Let box scrollLeft ++ scroll to the left. To continuously scroll to the left, you need to make a judgment. If the scrollLeft value is equal to or greater than the c2 width, set the scrollLeft value to 0, which will keep repeating.
Assign the content with id c1 to c2 so that the content cannot be changed during scrolling.
Now you can scroll, move the mouse to the bottom to stop, move the mouse out, scroll to continue the effect.
Now it is to scroll left. If you scroll right, you can use the following code
If (a. scrollLeft <= 0 ){
A. scrollLeft + = c1.offsetWidth;
} Else {
A. scrollLeft --;
}
When the left scrolling distance of an element is less than 0, set the left scrolling distance to half of the width. Otherwise, set the left scrolling value --
Key Aspect 5: clearInterval cancels the timeout set by setInterval ()
C1.onmouseover = function (){
ClearInterval (timer );
}
C1.onmouseout = function (){
Timer = setInterval (scroll, 60 );
}
Add these two lines in the above Code to move the cursor up and stop the scroll.
Although it is a bit cool, it can now achieve seamless control of the left and right scrolling effect,
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Style>
Body, div {margin: 0; padding: 0 ;}
Body {padding: 20px ;}
# Box {width: 300px; height: 50px; line-height: 30px; overflow-x: scroll; overflow-y: hidden; border: 1px solid # ccc; float: left; margin: 0 10px; display: inline ;}
# C {width: 800px ;}
# C1, # c2 {width: 400px; float: left ;}
# Prev, # next {width: 50px; height: 50px; line-height: 50px; text-align: center; background: # ccc; cursor: pointer; float: left ;}
. Wrap {width: 500px ;}
</Style>
</Head>
<Body>
<Div class = "wrap">
<Div id = "prev"> </div>
<Div id = "box">
<Div id = "c">
<Div id = "c1"> content 1 content 2 content 3 content 4 content 5 content 6 content 7 </div>
<Div id = "c2"> </div>
</Div>
</Div>
<Div id = "next" >></div>
</Div>
<Script>
Var c1 = document. getElementById ("c1 ");
Var c2 = document. getElementById ("c2 ");
Var a = document. getElementById ("box ");
Var prev = document. getElementById ("prev ");
Var next = document. getElementById ("next ");
Var timer;
C2.innerHTML = c1.innerHTML;
Function scroll_l (){
If (a. scrollLeft> = c1.offsetWidth ){
A. scrollLeft = 0;
} Else {
A. scrollLeft ++;
}
}
Function scroll_r (){
If (a. scrollLeft <= 0 ){
A. scrollLeft + = c1.offsetWidth;
} Else {
A. scrollLeft --;
}
}
Timer = setInterval (scroll_l, 60 );
A. onmouseover = function (){
ClearInterval (timer );
}
A. onmouseout = function (){
Timer = setInterval (scroll_l, 60 );
}
Prev. onclick = function (){
ClearInterval (timer );
Change (0 );
}
Next. onclick = function (){
ClearInterval (timer );
Change (1)
}
Function change (r ){
If (r = 0 ){
Timer = setInterval (scroll_l, 60 );
A. onmouseout = function (){
Timer = setInterval (scroll_l, 60 );
}
}
If (r = 1 ){
Timer = setInterval (scroll_r, 60 );
A. onmouseout = function (){
Timer = setInterval (scroll_r, 60 );
}
}
}
</Script>
</Body>
</Html>
From jingangel
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
