Home > Developer > Web Develop
Page Auto-scrolling effect, can be implemented by JavaScript, but today inadvertently found an HTML tag-<marquee></marquee> can achieve a variety of scrolling effect, without JS control.
Use marquee tags not only to move text, but also to move pictures, tables, and so on.
Syntax:<marquee>...</marquee>; Description: Add the content you want to scroll between the tags.
Important attributes:
1. Scrolling direction direction (including 4 values: Up, down, left, and right)
Syntax: <marquee direction= "scrolling direction" >...</marquee>
2. Scrolling mode behavior (scroll: cyclic scrolling, default effect; slide: stop only once scrolling; alternate: rotate back and forth)
Syntax: <marquee behavior= "scrolling mode" >...</marquee>
3. Scrolling speed ScrollAmount (scrolling speed is the length, in pixels, that is set to move each time you scroll)
Syntax: <marquee scrollamount= "5" >...</marquee>
4. Scrolling delay Scrolldelay (sets the time interval for scrolling, in milliseconds)
Syntax: <marquee scrolldelay= ">...</marquee>"
5. Scroll loops loop (default is-1, scrolling will continue to loop)
Syntax: <marquee loop= "2" >...</marquee>
6. Scroll range width, height
7. Scrolling background color bgcolor
8. Blank Space Hspace, vspace
code example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<body>
<div>
<marquee direction= "Up" behavior= "scroll" scrollamount= "1" scrolldelay= "0" loop= "1" width= "" "Height=" 50 " Bgcolor= "#0099FF" hspace= "ten" vspace= "ten" >
Refers to the whole marquee alignment method; (2) Behavior: Set the way of scrolling: Scroll: Indicates that scrolling from one end to the other is repeated, and defects are not seamlessly scrolled. Slide: Represents a scroll from one end to the other, and does not repeat ...
</marquee>
<marquee behavior= "Scroll" direction= "Up" scrolldelay= "1" scrollamount= "2" onmouseover= "This.stop ()" onMouseOut= " This.start () "style=" height:310px; " >
<span> put down all return to the self, let the scenery to ease the mood, let the landscape purify the soul ...</span><br>
<span> Escape from the hustle and bustle of the world, break the work and life of all the trivial, find a quiet place ...</span><br>
<span> Escape from the hustle and bustle with the chance of a vacation ...</span><br>
<span> enjoy a fresh and elegant static posthumous, let the Sun touch the heart of free beating ...</span><br>
<span> like the blooming lotus in Baiyangdian, faint of a pool of fragrance, quietly bloom the unique beautiful ...</span><br>
<span> forget the constraints of the rules, only for a trip, let the soul back to the original blank ...</span><br>
<span> put down all return to the self, let the scenery to ease the mood, let the landscape purify the soul ...</span><br>
<span> Escape from the hustle and bustle of the world, break the work and life of all the trivial, find a quiet place ...</span><br>
<span> Escape from the hustle and bustle with the chance of a vacation ...</span><br>
<span> enjoy a fresh and elegant static posthumous, let the Sun touch the heart of free beating ...</span><br>
<span> like the blooming lotus in Baiyangdian, faint of a pool of fragrance, quietly bloom the unique beautiful ...</span><br>
<span> forget the constraints of the rules, only for a trip, let the soul back to the original blank ...</span><br>
</marquee>
</div>
</body>
HTML tag Marquee for scrolling 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
