Remember last year, csdn was named the simplest seamless rolling. Program , Only five lines are required. Code The post has aroused a heated discussion!
At that time, I tried to use this principle to implement smooth scrolling. In csdn, I published an article titled modifying the five lines of code in the current version to implement endless scrolling Code. There were about 10 lines of code to implement smooth scrolling! But the Code does not solve the problem of smoothness. The reason is that when the scolltop attribute is used, there is always a refresh problem, which causes flickering, And the Row Height setting cannot be well controlled.
Now we use the margin attribute to implement scrolling. 20 lines of javascript can be used to complete all the designed Scrolling on the page !!
Demo: attachment/1181020134_0.html
The Code is as follows:
<! 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 = UTF-8"/>
<Title> seamless scrolling </title>
</Head>
<Body>
<Style> A {display: block; font-size: 15px };</style>
<Div id = "div1" style = "width: 300px; Height: 68px; overflow: hidden">
<Div id = "div2" style = "margin-top: 0px; line-Height: 20px;">
<A href = "javascript:"> 1. You have had countless dreams. </a>
<A href = "javascript:"> 2, but it is lost in the passage of time </a>
<A href = "javascript:"> 3. Have you ever looked forward to the future? </a>
<A href = "javascript:"> 4, but lost in the years of growth </a>
<A href = "javascript:"> 5. csdn China programmer Forum </a>
<A href = "javascript:"> 6. Join us </a>
<A href = "javascript:"> 7. It looks good. </a>
</Div>
</Div>
<SCRIPT>
Function scrolln (ID, samont, step ){
VaR d = Document. getelementbyid (ID );
If (! D. scrolln ){
If (STEP) {d. Step = step; D. samont = samont ;}
D. scrolln = setinterval ("scrolln ('" + ID + "')", D. samont );
D. onmouseover = function () {clearinterval (this. scrolln); this. scrolln = NULL ;}
D. onmouseout = function () {scrolln (this. ID )}
}
VaR Top = parseint (D. style. margintop );
VaR lineheight = parseint (D. style. lineheight );
If (top>-lineheight ){
D. style. margintop = (top-d.step) + "PX ";}
Else {
Do {
VaR o = D. firstchild;
D. removechild (O );
D. appendchild (O );
} While (! D. firstchild. tagname)
D. style. margintop = "0px ";
}
}
// The first parameter is the tag ID of the Rolling Block, the second parameter is the rolling interval, and the third parameter is the rolling distance PX.
Scrolln ("div2", 100,2 );
</SCRIPT>
</Body>
</Html>
