Javascript code for horizontal or vertical scrolling of webpage content _ javascript tips-js tutorial

The main advantage of using Javascript to implement horizontal or vertical scrolling of news content is that we can implement custom scrolling styles or special effects, and the application effect is more distinctive than the traditional marquee, the method is also relatively simple, mainly two parts, one is the rolling content part; two, JS rolling code part, there are only two sentences.

I. Traditional rolling code

<Marquee scrollamount = "2" loop = "-1" scrolldelay = "0" width = "250"> <p style = "FILTER: glow (color = # FF0000, strength = 4); COLOR: # ffffff; HEIGHT: 10px; WIDTH: 750px "> use Javascript to implement horizontal scrolling of news content! </P> </marquee>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

The traditional rolling code application has a relatively simple effect, and there are often browser compatibility problems. For example, the effect of marquee on FIREFOX will become invalid.

Ii. Rolling effect implemented by Javascript

<P style = "width: 300px; overflow: hidden;" onMouseOver = "clearInterval (timer1);" onMouseOut = "go ();"> <p style = "position: relative; top: 0px; left: 0px; white-space: nowrap; color: # 0000FF; "id =" news "> using Javascript to horizontally scroll news content 1 <script language =" javascript "> document. write ("using Javascript to implement horizontal scrolling of news content 2"); // news content document. write ("using Javascript to implement horizontal scrolling of news content 3 "); // script </p> // you can adjust the width and width of the p tag. <script l Anguage = javascript> function newsScroll () {news. style. pixelLeft = (news. style. pixelLeft-1) % headnew. offsetWidth; // implement uninterrupted scrolling} function go () {timer1 = setInterval ('newsscroll () ', 30) // you can change the speed of the second parameter. The smaller the value, faster. } Go (); script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

The above is the complete JS rolling code. If you want to implement vertical scrolling, you only need to make a simple modification, that is, using the style's pixTop attribute.

From tianyuan blog