Three type of text uninterrupted scrolling code

<div id= "Marquees" > <!--these are subtitles content, you can define--> <a href= "#" > Links 1</a>
<br> <a href= "#" > Link 2</a>
<br> <a href= "#" > Link 3</a>
<br> <a href= "#" > Link 4</a>
<br> <!--end of caption Content-->
</div>
<!--The following is a Web page special effects code-->
<script language= "JavaScript" >
<!--
marqueesheight=200; Content area Height
Stops tutorial Croll=false; This variable controls whether scrolling is stopped
With (marquees) {
Nowrap=true; The content area of this table does not wrap automatically.
style.width=0; So we can set it to a width of 0, because it's going to be big.
Style.height=marqueesheight;
Style.overflowy= "hidden"; Scroll bars are not visible
Onmouseo Tutorial ver=new function ("stopscroll=true"); Mouse over, stop scrolling
Onmouseout=new function ("Stopscroll=false"); Mouse away, start scrolling
}
At this point, the height of the content area is unreadable. The following outputs an invisible layer "templayer", which is later copied into the contents:
document.write (' <div id= "Templayer" style= "Position:absolute;z-index:1;visibility:hidden" ></div> ");
function init () {//Initialize scrolling content
Copy the original content multiple times to "Templayer" until the height of "templayer" is greater than the content area height:
while (Templayer.offsetheight<marqueesheight) {
templayer.innerhtml+=marquees.innerhtml;
///Copy "twice Times" of "templayer" content back to the original content area:
marquees.innerhtml=templayer.innerhtml+templayer.innerhtml;
Sets the continuous timeout, calling the Scrollup () function to drive the scroll bar:
SetInterval ("Scrollup ()", 20);
}
Document.body.onload=init;
Pretop=0; This variable is used to determine if the scroll bar has reached its end.
function Scrollup () {//scroll bar driver
if (stopscroll==true) return; Stop scrolling If the variable "Stopscroll" is true
Pretop=marquees.scrolltop; Record the scroll bar position before scrolling
Marquees.scrolltop+=1; Scroll bar to move down one pixel
If the scroll bar does not move, scroll up to the same position as the current screen
Not only that, but also scrolling down one pixel (+1):
if (pretop==marquees.scrolltop) {
marquees.scrolltop=templayer.offsetheight-marqueesheight+1;
}
}
-->
</script>

Support left and right scrolling code

<marquee direction=up height=75 Onmouseout=this.start () onmouseover=this.stop () scrollamount=1 scrolldelay=100 Width= "180" id=marquee1> scrolling content </marquee>

The direction parameter can be set: Up Down left right (control scrolling direction)

scrolldelay = 100 (100 is the speed, the larger the value the faster the scrolling ...)

Onmouseout=this.start () ... Mouse move out of state scroll

Onmouseover=this.stop () ..... Stop scrolling when the mouse passes

Basic syntax

<marquee> ... </marquee>

Move property settings, this move is not limited to text, can also be applied to pictures, tables, etc.

Direction

<direction=#> #=left, right, up, down <marquee, direction=left>, move from Starboard to left! </marquee>

Way

<bihavior=#> #=scroll, Slide, alternate <marquee behavior=scroll> go around in a circle! </marquee>

<marquee behavior=slide> only go once to rest! </marquee>

<marquee behavior=alternate> go back and forth </marquee>

Cycle

<loop=#> #= number of times; if not specified then the cycle is more than (infinite) <marquee loop=3 width=50% behavior=scroll> only 3 trips </marquee> <p >

<marquee loop=3 width=50% behavior=slide> only 3 trips to </marquee>

<marquee loop=3 width=50% behavior=alternate> only 3 trip! </marquee>

Speed

<scrollamount=#> <marquee scrollamount=20>, I walked so fast yo! </marquee>

Delay

<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>, I take a step, stop! </marquee>

Appearance (layout) settings

Alignment (Align)

<align=#> #=top, middle, bottom <font size=6>

<marquee align=# width=400> la la la, I will move yes! </marquee>

</font>

Background

<bgcolor=#> #=rrggbb 16 in digital, or the following predefined colors:

Black, olive, teal, red, blue, maroon, Navy, gray, lime,

Fuchsia, white, green, purple, silver, yellow, aqua <marquee bgcolor=aaaaee> colors! </marquee>

Area

Blank

(margins)

<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle> area! </marquee>

See this should be very clear! I added a picture on the page to scroll and then add a text on the conflict, the only way to find the microphone, and finally find this, LZ wrote very well on the collection, and then put the source posted down http://sls18.banzhu.net/article/ Sls18-11-1045718.html a few more common scrolling effects below

Web page picture text uninterrupted scrolling code

Web page picture Text uninterrupted scrolling code (up, down, left, right)

-----------------------Scroll the main part up and down-------------------------

<!--picture width width:90 picture height height:150 background color background: #214984 These are modified according to your actual needs-->

<div Id=demo style=overflow:hidden;height:150;width:90;background: #214984; color: #ffffff >

<div id=demo1>

<!--add content to scroll-->

<!--#i nclude file= "gx/photoimg.htm"--></div>

<div id=demo2></div>

</div>

-----------------------Scroll up-------------------------------

<script>

var speed=30

Demo2.innerhtml=demo1.innerhtml

Function Marquee () {

if (demo2.offsettop-demo.scrolltop<=0)

Demo.scrolltop-=demo1.offsetheight

else{

demo.scrolltop++

}

}

var mymar=setinterval (Marquee,speed)

Demo.onmouseover=function () {clearinterval (MyMar)}

Demo.onmouseout=function () {Mymar=setinterval (marquee,speed)}

</script>

-----------------------Scroll down-------------------------------

<script>

var speed=30

Demo2.innerhtml=demo1.innerhtml

Demo.scrolltop=demo.scrollheight

Function Marquee () {

if (demo1.offsettop-demo.scrolltop>=0)

Demo.scrolltop+=demo2.offsetheight

else{

demo.scrolltop--

}

}

var mymar=setinterval (Marquee,speed)

Demo.onmouseover=function () {clearinterval (MyMar)}

Demo.onmouseout=function () {Mymar=setinterval (marquee,speed)}

</script>

-----------------------Scroll around the main part--------------------------

<!--picture width width:90 picture height height:150 background color background: #214984 These are modified according to your actual needs-->

<div Id=demo style=overflow:hidden;height:100;width:600;background: #214984; color: #ffffff >

<table align=left cellpadding=0 cellspace=0 border=0>

<tr>

<TD id=demo1 valign=top<!--#i nclude file= "gx/photoimg.htm"-->

</td>

<TD Id=demo2 valign=top></td>

</tr>

</table>

</div>

-----------------------Scroll Left-------------------------------

<script>

var speed=30

Demo2.innerhtml=demo1.innerhtml

Function Marquee () {

if (demo2.offsetwidth-demo.scrollleft<=0)

Demo.scrollleft-=demo1.offsetwidth

else{

demo.scrollleft++

}

}

var mymar=setinterval (Marquee,speed)

Demo.onmouseover=function () {clearinterval (MyMar)}

Demo.onmouseout=function () {Mymar=setinterval (marquee,speed)}

</script>

-----------------------Scroll Right-------------------------------

<script>

var speed=30

Demo2.innerhtml=demo1.innerhtml

Demo.scrollleft=demo.scrollwidth

Function Marquee () {

if (demo.scrollleft<=0)

Demo.scrollleft+=demo2.offsetwidth

else{

demo.scrollleft--

}

}

var mymar=setinterval (Marquee,speed)

Demo.onmouseover=function () {clearinterval (MyMar)}

Demo.onmouseout=function () {Mymar=setinterval (marquee,speed)}

</script>

Scroll code Three

<!doctype HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Continuous Right scrolling </title>
<style type= "Text/css Tutorial" >
<!--
Body {
font-size:9pt;
Color: #000000;
}
A
Color: #0000ff;
Text-decoration:none;
}
a:hover {
Color: #ff0000;
Text-decoration:underline;
}
-->
</style>
<body>
<div id= "Marquees" > <a href= "#" > Link one </a> <a href= "#" > Link two </a> <a href= "#" > Link three </a > <a href= "#" > Links four </a> </div>
<div id= "Templayer" style= "Position:absolute;left:0;top:0;visibility:hidden" ></div>
<script language= "JavaScript" >

marqueeswidth=200;

With (marquees) {
style.height=0;
Style.width=marqueeswidth;
style.overflowx= "hidden";
style.overflowy= "visible";
Nowrap=true;
Onmouseover=new function ("stopscroll=true");
Onmouseout=new function ("Stopscroll=false");
}
Pretop=0; Currenttop=0; getlimit=0; Stopscroll=false;

function init () {
Templayer.innerhtml= "";
while (Templayer.offsetwidth<marqueeswidth) {
templayer.innerhtml+=marquees.innerhtml;
}
marquees.innerhtml+=templayer.innerhtml;
SetInterval ("Scrollright ()", 10);
}init ();

function Scrollright () {
if (stopscroll==true) return;

Preleft=marquees.scrollleft;
Marquees.scrollleft-=1;
if (preleft==marquees.scrollleft) {
if (!getlimit) {
    marquees.scrollleft= templayer.offsetwidth*2;
    Getlimit=marquees.scrollleft;
}
Marquees.scrollleft=getlimit-templayer.offsetwidth+marqueeswidth
marquees.scrollleft-=1;
}
}
</script>
</body>
<div align= "center" ><br><br> This code by <a href= "http://www.111cn.net/"   target= "_blank" ><font color= "Red" > Webmaster Resource Network |111cn.net</font ></a> collect and organize!</div>