JS Magic Hall: Information scrolling effect via marquee tag

Source: Internet
Author: User

First, preface

Limited space to show unlimited content, this is the most common place to scroll. According to the information scrolling effect we can have a lot of implementations, but the HTML comes with the marquee tag is one of the simpler implementation. The following records are available for later inspection.

Second, the basic knowledge of marquee tags


<marquee behavior="scroll" direction="left" loop="  -1 "scrollamount="scrolldelay=">"
Scrolling information </marquee>


behavior , scrolling the way. A value of alternate means scrolling back and forth between the ends, and a value of scroll that is repeated by one end to the other, the default value, and a value slide that is not scrolled to the other end by one end.

direction , the direction of scrolling. The value range is left (the default) , right, up, and down.

Loop , the number of times scrolling. The default value of 1 indicates that scrolling continues.

ScrollAmount , sets the step size of the scroll. The default value is 6, which scrolls with a default value when set to a negative number.

scrolldelay , set the delay time (in MS) between the two rolling cycles. The default value is 85, which scrolls with a default value when set to a negative number.

Third, the mouse hover pause scrolling, remove to resume scrolling

<marquee onmouseover="this.stop (); " onmouseout="This.start (); "> scrolling Messages </marquee>

Iv. Summary

The marquee tag is a good choice when we only need to implement a simple scrolling effect such as a special announcement (although it has been abolished in HTML5 and suggested to use the CSS3 animation effect instead)

Respect the original, reprint please indicate from: http://www.cnblogs.com/fsjohnhuang/p/4009914.html ^_^ Fat Boy John

JS Magic Hall: Information scrolling effect via marquee tag

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.