Detailed description of Marquee usage
Release: | Author: cnnas | Source: Large windmill Chinese and English portal community
A few days ago, I had to perform uninterrupted scrolling. After searching for a long time, I finally found the method written by Amy's tears. After raidl was perfect, it was very easy to use and did not dare to hide it. I 'd like to share it with you. At that time, it was saved separately and forgot what the original website was.
The following describes the ultimate usage of Marquee.
Let's take a look at the HTML attributes of Marquee.
<Marquee align = "... "
Behavior = "... "
Bgcolor = "... "
Direction = "... "
Height = "... "
Width = "... "
Hspace = "... "
Vspace = "... "
Loop = "... "
Scrollamount = "... "
Scrolldelay = "... "
>... </Marquee>
Align: Align left, center, right, top, bottom (needless to say)
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": Default Value -- scroll back and forth between the two ends.
Direction: Left (default) left; right; up; down;
Bgcolor: Background Color
Height: Height
Weight: width
Used to set the width of the left and right sides and the upper and lower sides of the scroll subtitle respectively. The function is similar to the margin in CSS.
Scrollamount: used to set the interval after each continuous scrolling text. The interval is represented in pixels. The above is the official saying, which is actually the rolling speed. The value cannot be too large. Otherwise, no response. the greater the value, the faster the speed.
Scrolldelay: Delay Time
Loop: This attribute is also familiar to everyone. The number of loops. Loop =-1 always repeats the loop (default)
Okay. Now let's get started with some dcode knowledge.
First, two mouse events
Onmouseover: A mouse trigger event. This event is triggered when you move the mouse pointer to an object.
Onmouseout: A mouse slip event. This event is triggered when you move the mouse pointer out of the Object Boundary.
Here we will use this. Start () and this. Stop ()
Font-size: 9pt; color: black; font-family:; MSO-ascii-font-family: verdana; MSO-Hansi-font-family: verdana "> it means to stop the loop when you move the cursor over the content of Marquee. move the cursor away from Marquee and start moving again.
Continue
Innercode: sets or obtains the code located in the start and end tags of an object.
Innertext: sets or obtains the text in the object's start and end labels.
Scrollleft: sets or obtains the distance between the left-side border of the object and the leftmost end of the currently visible content in the window.
Scrolltop: set or obtain the distance between the top of the object and the top of the visible content in the window. PS: Do not assume that scrollrigh and scrolldown exist :)
Scrolldelay: sets or obtains the subtitle scroll speed. To create a vertical scroll subtitle, set its scrollleft attribute to 0. To create a horizontal scroll subtitle, set its scrolltop attribute to 0, which will overwrite any script settings.
Scrollheight: gets the scroll height of an object.
Scrollamount: sets or obtains the number of text scrolling sequences between each subtitle draw sequence.
Offsettop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsettop attribute.
Offsetleft: obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetparent attribute.
Offsetheight: gets the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetparent attribute.
Setinterval: interaction time. It executes the expression once every specified time after loading.
Clearinterval: Use the setinterval method to cancel the previous interval events.
<HTML>
<Head>
<Style type = "text/CSS">
<! --
. Test {
Font-size: 12px;
Line-Height: normal;
Text-Decoration: none;
}
-->
</Style>
<Head>
<Body>
<Div id = "layer1" style = "overflow-Y: hidden; width: 50;">
<Div id = "Layer2">
<Table width = "130" Height = "70" border = "0" align = "center" cellpadding = "0" cellspacing = "0" class = "test">
<Tr>
<TD width = "150" Height = "70" valign = "TOP" bgcolor = "# ffffff" class = "nav1style style46">
<Center> Article (1) </center>
<A href = "#" Title = "about <electrical engineering automation> notice on postgraduate courses" class = "none_underline"> <font color = # ff0000> about <electrical Engineering automation> notification of postgraduate courses 2006-3-9 </font> </a> <br>
<Center> Article (2) </center>
<A href = "#" Title = "Notice on Enterprise Management graduate courses" class = "none_underline"> <font color = # ff0000> notice on teaching in enterprise management graduate courses 2006-3-8 </font> </a> <br>
</TD>
</Tr>
</Table>
</Div>
<Div id = "layer3"> </div>
<Script language = "JavaScript">
VaR layerheight = 100; // defines the height of the rolling area.
VaR IFRAME = 1; // defines the pixels that move each frame.
VaR ifrequency = 50; // defines the frame frequency.
VaR timer; // defines the time handle.
If (document. getelementbyid ("Layer2"). offsetheight> = layerheight)
Document. getelementbyid ("layer1"). style. Height = layerheight;
Else
Document. getelementbyid ("layer1"). style. Height = Document. getelementbyid ("Layer2"). offsetheight;
Document. getelementbyid ("layer3"). innerhtml = Document. getelementbyid ("Layer2"). innerhtml;
Function move (){
If (document. getelementbyid ("layer1"). scrolltop> = Document. getelementbyid ("Layer2"). offsetheight ){
Document. getelementbyid ("layer1"). scrolltop-= (document. getelementbyid ("Layer2"). offsetheight-IFRAME );
}
Else {
Document. getelementbyid ("layer1"). scrolltop + = IFRAME;
}
}
Timer = setinterval ("move ()", ifrequency );
Document. getelementbyid ("layer1"). onmouseover = function () {clearinterval (timer );}
Document. getelementbyid ("layer1"). onmouseout = function () {timer = setinterval ("move ()", ifrequency );}
</SCRIPT>
</Body>
</Html> basic syntax of a Super User (09:50:07)
<Marquee>... </marquee>
Mobile attribute settings, such movement is not limited to text, but can also be applied to images, tables, and so on.
Direction
<Direction =#>#= left, right, up, down <marquee direction = left> shift from right to left! </Marquee>
Method
<Bihavior =###= scroll, slide, alternate <marquee behavior = scroll> go around in a circle! </Marquee>
<Marquee behavior = slide> just one stop! </Marquee>
<Marquee behavior = alternate> back and forth </marquee>
Loop
<Loop =#># = number of times; if not specified, the loop is not limited to (infinite) <marquee loop = 3 width = 50% behavior = scroll> 3 </marquee> <p>
<Marquee loop = 3 width = 50% behavior = slide> only take 3 </marquee>
<Marquee loop = 3 width = 50% behavior = alternate> only 3 trips! </Marquee>
Speed
<Scrollamount = #> <marquee scrollamount = 20> La la! </Marquee>
Latency
<Scrolldelay = #> <marquee scrolldelay = 500 scrollamount = 100> La la! Let's take a step and stop it! </Marquee>
Layout settings
Align)
<Align =#>#= top, middle, bottom <font size = 6>
<Marquee align = # width = 400> La la, I will move it! </Marquee>
</Font>
Background Color
<Bgcolor = #>#= rrggbb hexadecimal 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> color! </Marquee>
Area
<Height = # width =#> <marquee Height = 40 width = 50% bgcolor = aaeeaa> area! </Marquee>
Blank
(Margins) <Marquee hspace = 20 vspace = 20 width = 150 bgcolor = ffaaaa align = middle> area! </Marquee> the problem of marquee in IE8: marquee is not easy to use in IE8. In IE8, I only know that xhtml4.0 is supported. I need to add it before. <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> This is fine. But <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"> but not. And use <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"> after that, the display of my entire webpage is problematic, and the CSS file does not seem to be invalid for some reason. I checked some information on the Internet and found that we do not recommend using marquee, but JavaScript. Use JS Code to operate offsetheight and scrolltop to achieve this rolling effect.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
