Jquery achieves the marquee effect (horizontal and vertical scrolling of text or images) _ jquery

Source: Internet
Author: User
Previously, in front-end html code, the use of marquee to implement horizontal and vertical scrolling of text or images, but with the consideration of browser compatibility and compliance with w3c standards, next we will introduce how to use Jquery to implement the marquee effect on webpages. If you are interested, you can find out that, in the front-end html code, the marquee is used to implement horizontal and vertical scrolling of text or images, but with the consideration of browser compatibility and compliance with w3c standards, I thought it would still be implemented using javascript code. Later, I liked jquery again. The content below will be helpful to beginners. Do not spray it, but I am very grateful for your guidance.

Principle: The principle of seamless rolling is to use two containers with the same content to achieve the visual effect of deceiving people. Then, the scroll bar of the entire large container can be moved up or down to implement scrolling. The following is a hand-drawn figure to briefly describe the principle. First, we aim to horizontally scroll the content in box 1 to the left (scroll to the right, the principle of up and down is actually roughly the same, as long as you know one of them, none of the above .). When loading the page, we use js to dynamically assign the content (html content) in box 2 to the same content as that in box 1. Then, move the scroll bar gradually to the Right to achieve the left effect. So much. The Code (with comments) will be attached ).

1.html code

The Code is as follows:





Juqery achieves the effect of marquee

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.