I think everyone has seen all kinds of scrolling (the most commonly used is to update news). Generally, as long as it is not an image, all of them are done using HTML itself to provide a very good rolling Mark-Marquee (this effect can also be achieved using JS). Of course, it doesn't mean that images cannot be done like that.
The following are some basic parameters of Marquee:
The tag syntax is as follows:
<Marquee
Aligh = left | center | right | top | bottom
Bgcolor = # N
Direction = left | right | up | down
Behavior = Type
Height = N
Hspace = N
Scrollamount = N
Scrolldelay = N
Width = N
Vspace = N
Loop = n> content </marquee> The following explains the meaning of each parameter:
Align: it is used to set the position of the active subtitle. In addition to the left, center, and right positions, the top and bottom positions are added.
Bgcolor: used to set the background color of an active subtitle. It can be an English word or a hexadecimal number.
Direction: used to set the scrolling direction of an active subtitle to left, right, up, and down ).
Behavior: used to set the scroll mode, mainly in three ways:
Behavior = "scroll" indicates rolling from one end to the other;
Behavior = "slide": indicates that one end quickly slides to the other end without repeating it;
Behavior = "alternate" indicates to scroll back and forth between the two ends.
Height: used to set the height of a rolling subtitle.
Width: Specifies the width of the scroll subtitle.
The two parameters are used to set the width of the left and right sides and the upper and lower sides of the subtitles.
Scrollamount: used to set the rolling distance of active subtitles. The smaller the value, the faster the scrolling speed.
Scrolldelay: used to set the delay time between two scrolling times. The smaller the value, the smaller the interval.
Loop: used to set the number of scrolling times. When loop =-1, it means to scroll down until the page is updated. By default, the subtitle height is the text height, the horizontal scroll width is the width of the current position, and the vertical scroll height is the height of the current position. Now we want to introduce a new type of scrolling. We can use js to scroll Subtitles: Up And pause for one to two seconds in the middle (like the classic ONE ):
Set the following Code Paste it to the location you want to display:
<SCRIPT>
VaR marqueecontent = new array (); // defines an array to store the displayed content.
Marqueecontent [0] = '<a href = "#" onclick = "reinitmarquee ()"> refresh the latest list </font> </a> ';
Marqueecontent [1] = '<a href = http://www.blueidea.com/updatelist.asp target = _ blank> 60 latest site updates </a> ';
Marqueecontent [2] = '<a href = http://www.blueidea.com/tech/graph/2003/875.asp target = _ blank> Feather Effect preparation tutorial </a> ';
Marqueecontent [3] = '<a href = http://www.blueidea.com/tech/program/2003/831.asp target = _ blank> MySQL & ASP </a> ';
Marqueecontent [4] = '<a href = http://www.blueidea.com/tech/web/2003/874.asp target = _ blank> a preliminary understanding of css3 </a> ';
Marqueecontent [5] = '<a href = http://www.blueidea.com/tech/graph/2003/864.asp target = _ blank> fireworks MX 2004 Perform vertices </a> ';
Marqueecontent [6] = '<a href = http://www.blueidea.com/tech/graph/2003/872.asp target = _ blank> fireworks MX 2004 High Gradient fill </a> ';
Marqueecontent [7] = '<a href = http://www.blueidea.com/photo/gallery/2003/873.asp target = _ blank> flowers in the bottle </a> ';
Marqueecontent [8] = '<a href = http://www.blueidea.com/tech/graph/2003/871.asp target = _ blank> fireworks MX implementation option effect </a> ';
Marqueecontent [9] = '<a href = http://www.blueidea.com/photo/gallery/2003/870.asp target = _ blank> couple: black and white love air </a> ';
Marqueecontent [10] = '<a href = http://www.blueidea.com/tech/graph/2003/866.asp target = _ blank> make mac-style apple logo </a> ';
Marqueecontent [11] = '<a href = http://www.blueidea.com/tech/graph/2003/868.asp target = _ blank> combination of Shell Making and cracked characters </a> '; VaR marqueeinterval = new array (); // defines common and frequently used variables.
VaR marqueeid = 0;
VaR marqueedelay = 4000;
VaR marqueeheight = 16; // Next, define the functions to be used.
Array. Prototype. Random = function (){
VaR A = this;
VaR L = A. length;
For (VAR I = 0; I <L; I ){
VaR r = math. Floor (math. Random () * (l-I ));
A = A. Slice (0, R). Concat (A. Slice (R 1). Concat (A [R]);
}
Return;
}
Function initmarquee (){
Marqueecontent = marqueecontent. Random ();
VaR STR = '';
For (VAR I = 0; I <math. Min (3, marqueecontent. Length); I) STR = (I> 0? '':'') Marqueecontent;
Document. write ('<Div id = marqueebox style = "overflow: hidden; Height: 'marqueeheight' PX" onmouseover = "clearinterval (marqueeinterval [0]) "onmouseout =" marqueeinterval [0] = setinterval (\ 'startmarquee () \ ', marqueedelay) "> <div> 'str' </div> ');
Marqueeid = 2;
If (marqueecontent. length> 3) marqueeinterval [0] = setinterval ("startmarquee ()", marqueedelay );
}
Function reinitmarquee (){
Js_scroll_content.src = 'scroll _ content2.js ';
Marqueecontent = marqueecontent. Random ();
VaR STR = '';
For (VAR I = 0; I <math. Min (3, marqueecontent. Length); I) STR = (I> 0? '':'') Marqueecontent;
Marqueebox. childnodes [(marqueebox. childnodes. Length = 1? 0: 1)]. innerhtml = STR;
Marqueeid = 2;
}
Function startmarquee (){
VaR STR = '';
For (VAR I = 0; (I <3) & (marqueeid I <marqueecontent. Length); I ){
STR = (I> 0? '':'') Marqueecontent [marqueeid I];
}
Marqueeid = 3;
If (marqueeid> marqueecontent. Length) marqueeid = 0; If (marqueebox. childnodes. Length = 1 ){
VaR nextline = Document. createelement ('div ');
Nextline. innerhtml = STR;
Marqueebox. appendchild (nextline );
}
Else {
Marqueebox. childnodes [0]. innerhtml = STR;
Marqueebox. appendchild (marqueebox. childnodes [0]);
Marqueebox. scrolltop = 0;
}
Clearinterval (marqueeinterval [1]);
Marqueeinterval [1] = setinterval ("scrollmarquee ()", 20 );
}
Function scrollmarquee (){
Marqueebox. scrolltop;
If (marqueebox. scrolltop % marqueeheight = (marqueeHeight-1 )){
Clearinterval (marqueeinterval [1]);
}
}
Initmarquee ();
</SCRIPT>
|
