wordpress CMS主题 微信
Home > 网站建设 > How to realize the effect Webpage scrolling text?

How to realize the effect Webpage scrolling text?

高时银博客 网站建设 点击: 2,338 次 0 0

How to realize the effect Webpage scrolling text? Sometimes want to besomething special on the Webpage: rolling, rolling around on the. What shall Ido? This is not difficult, to introduce to you the following 2 methods.

Method: the use of marpuee to achieve

Here in front of scrolling text and code:

<MARQUEE scrollAmount=1 scrollDelay=77 direction=up width=270 height=77

"(onmouseout= this.start)" onmouseover= "(this.stop)" >

Coupled with the </MARQUEE> behind the rolling text

Code description:

1, width and height, said rolling area size, width is the width, height is highly.Especially when doing vertical scrolling, must set the value of height.

2, direction. Represents the rolling direction, the default is from right to left: ← ←←. Possible values are right, down, up. The rolling direction respectively: right → of → of → said, up ↑, says down ↓.

3, scrollDelay=77 represents the pause time, the greater the number, the longer residence time;

4, scrollAmount=1 on behalf of the rolling speed, the bigger the fast digital.

Method two: JS text scroll up and down the code

The following code style:

<div id= "MQ" style= "width:100%; height:200px; overflow:hidden" onmouseover="iScrollAmount=0"

Onmouseout= "iScrollAmount=1" >


I gently waved, the rosy clouds. <br/>


The golden willows by the riverside, is the bride in the setting sun; <br/>

Their reflections on the shimmering waves, in my mind. <br/>


The floatingheart growing in the sludge, sways leisurely under the water; <br/>

In the gentle waves of Cambridge, I would be a water plant. <br/>


That pool under the shade of elm, not water but the rainbow from the sky; <br/>

Twisted into floating weeds, precipitating rainbow dreams. <br/>


Dream, hold a long pole, to the grass is greener; <br/>

A ship loaded with star, sing in the starlight variegated. <br/>


But I cannot sing, quietness is my farewell music; <br/>

Even summer insects keep silence for me, silence is Cambridge tonight. <br/>


Very quietly I take my leave, as quietly as I came here; <br/>

I wave of the sleeves, do not take a cloud. <br/>




Var oMarquee = document.getElementById ("MQ"); / / rolling object

Var iLineHeight = 42; / / single pixel height

Var iLineCount = 7; / / the actual number of rows

Var iScrollAmount = 1; / / scroll for each pixel height

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);


You can see my home understand the effect.

版权所有 © 转载时必须以链接形式注明作者和原始出处!