The simplest seamless rolling program requires only five lines of code)

Source: Internet
Author: User

Switch to csdn go_rush (A Shun)

<Style> A {display: block; font-size: 15px };</style>
<Div id = "div1" style = "width: 300px; Height: 68px; overflow: hidden">
<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>

<SCRIPT>
VaR T = setinterval (myfunc, 1000)
VaR d = Document. getelementbyid ("div1 ")
Function myfunc (){
VaR o = D. firstchild
D. removechild (o)
D. appendchild (o)
}
D. onmouseover = function () {clearinterval (t )}
D. onmouseout = function () {T = setinterval (myfunc, 1000 )}
</SCRIPT>

The above shows four rows. If only one row is required, or a few rows are changed here, the height is 68px.

Show only one row:
<Div id = "div1" style = "width: 300px; Height: 15px; overflow: hidden">

Certificate ---------------------------------------------------------------------------------------------------------------------------------------

Of course, images are okay. Except for HTML scripts of large image sections, you can roll a segment at a time.

<Style> IMG {display: block} </style>
<Div id = "div1" style = "width: 221px; Height: 187px; overflow: hidden">




</Div>

<SCRIPT>
VaR T = setinterval (myfunc, 1000)
VaR d = Document. getelementbyid ("div1 ")
Function myfunc (){
VaR o = D. firstchild
D. removechild (o)
D. appendchild (o)
}
D. onmouseover = function () {clearinterval (t )}
D. onmouseout = function () {T = setinterval (myfunc, 1000 )}
</SCRIPT>

 

Certificate ---------------------------------------------------------------------------------------------------------------------------------------

You only need to modify a few characters to roll horizontally.

<Div id = "div1" style = "width: 884px; Height: 187px; overflow: hidden">




</Div>

<SCRIPT>
VaR T = setinterval (myfunc, 1000)
VaR d = Document. getelementbyid ("div1 ")
Function myfunc (){
VaR o = D. firstchild
D. removechild (o)
D. appendchild (o)
}
D. onmouseover = function () {clearinterval (t )}
D. onmouseout = function () {T = setinterval (myfunc, 500 )}
</SCRIPT>

 

Certificate ----------------------------------------------------------------------------------------------------------------------------------------

Another rolling effect:

The onload delay is 1 s, and the rolling effect is displayed after 1 s.

Note: There are lines in men and women of the city.

 

 

<HTML>
<Head>
<Script language = "JavaScript">
VaR J // This is used to cancel scrolling.
Function mov ()
{
VaR DIV = Document. getelementbyid ('test ')
If (Div. style. pixeltop =-Div. clientheight)
{
Div. style. pixeltop = 0
J = Window. setTimeout ('mov () ', 1000)
}
Else
{
Div. style. pixeltop-= 10
J = Window. setTimeout ('mov () ', 10)
}
}
</SCRIPT>
</Head>
<Body onload = 'window. setTimeout ("mov ()", 1000)'>
<Div style = "width: 100%; Height: 150px; overflow: hidden">
<Div id = 'test' style = 'position: absolute '>
<PRE>
Tom: What light is the window on there?
Tom: the East
Tom: She is the beautiful sun.
Tom: Come on, the sun!
Tom: drive away the jealous Moon (the eyes of lower-stage Anna obviously do not taste)
Tom: Look, she held her face with her hands.
Tom: What a wonderful gesture.
Tom: I wish I could be the glove on that hand.
Tom :( take a deep breath) ou, her flickering eyes
Tom: like a zoo)
(Qingqing: Hey, you are performing the show. Are you sure you are sincere and polite ...... Switch, Continue !)
(Qingqing has completely entered the role)

Tom: Beautiful stars over the zoo
Tom: Yes, it's you.
Tom: You shine on the earth like a star
Tom: everything in the world is white and beautiful (it's silly)
Tom: none of them match you.
Tom: ignorant birds and animals
Tom: I'm desperate because I can't tell your name. (qingqing nodded slightly and was already touched)
Tom: all intersections are lit up with a green light to make your trip smooth.
Tom: If I am a poet
Tom: All my poems are just for you.
Tom: If I'm a judge
Tom: So your goodness and evil will be my supreme law
Tom: If I am a sentinel, every word of yours is my password.
Tom: If I were Xiang Yu, I 'd take you away and make you laugh.
(ANNA: No, no words) (PS: Tom entered the role too deep, and he had been in love for a long time, and he had been in the dark)

Tom: laugh at me, just like you and me for the first time
Tom: Let me tell you, even if the vows don't last forever.
Tom: Yes, I cry, though I only have thin shoulders (qingqing can't help crying)
Tom: You are a cotton coat in the cold winter.
Tom)
Tom: You have a mysterious silk shirt.
Tom: You are the source of my inspiration.
Tom: You are pure and naive (Tom looks deeply)
Tom: despising everything
Tom: like glass, you
(Long mo ...... At this time, the audience is suspended)

Tom: A bitter guide, a desperate pick-up
Tom: With your confusion and boredom
Tom: hit the rock.
(Tom goes to the table and picks up his glass (Romeo wants to drink Poisonous Wine ))

Tom: I made this cup for my lover.
(The cup fell to the ground, Tom fell to the ground, (qingqing: Romeo) struggling, then ......)
</PRE>
</Div>
</Div>
</Body>
</Html>

Bytes ------------------------------------------------------------------------------------------------------------------------------

Bestext (wood)

Some unnecessary variables are omitted. This time it should be okay.
Only the ilineheight and ilinecount parameters need to be adjusted. The height of the DIV is arbitrary, but it is best not to exceed the full text height.

<Style>
Div {font-size: 12px ;}
</Style>
<Div id = "MQ" style = "width: 100%; Height: 70px; overflow: hidden" onmouseover = "iscrollamount = 0"
Onmouseout = "iscrollamount = 1">
I gently walked away, just as I gently came; <br/>
I gently waved to the cloud of the West. <Br/>
<Br/>
The willow on the banks of that river is the bride in the sunset. <br/>
The shadows in the light are ripple in my mind. <Br/>
<Br/>
Qingting on the soft mud, the oil is shaken under the bottom; <br/>
In the gentle wave of kanghe, I am willing to serve as a water grass. <Br/>
<Br/>
A pool in the shade of elm, not a spring, but a rainbow in the sky; <br/>
Broken in the floating algae, precipitation rainbow dream. <Br/>
<Br/>
Dream-seeking, supporting growth and tracing to the green grass; <br/>
A ship full of stars, singing in the stars. <Br/>
<Br/>
However, I cannot play songs. Quietly, they are isolated secrets. <br/>
Xiadong is also silence for me, silence is Kang Qiao tonight. <Br/>
<Br/>
I quietly walked away, just as I quietly came; <br/>
I waved my sleeves and did not take away any cloud color. <Br/>
<Br/>
</Div>
<SCRIPT>
VaR omarquee = Document. getelementbyid ("MQ"); // scroll object
VaR ilineheight = 42; // Single Row Height, pixel
VaR ilinecount = 7; // the actual number of rows
VaR iscrollamount = 1; // The height of each scroll, pixel
Function run (){
Omarquee. scrolltop + = iscrollamount;
If (omarquee. scrolltop = ilinecount * ilineheight)
Omarquee. scrolltop = 0;
If (omarquee. scrolltop % ilineheight = 0 ){
Window. setTimeout ("Run ()", 2000 );
} Else {
Window. setTimeout ("Run ()", 50 );
}
}
Omarquee. innerhtml + = omarquee. innerhtml;
Window. setTimeout ("Run ()", 2000 );
</SCRIPT>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.