search

Home >Web Front-end >JS Tutorial >Perfectly compatible with jQuery imitation Sina graphics and text fade in and out intermittent scrolling effects of major browsers_jquery

Perfectly compatible with jQuery imitation Sina graphics and text fade in and out intermittent scrolling effects of major browsers_jquery

WBOY
WBOYOriginal
2016-05-16 16:31:331378browse

1. Effect and function description: imitation Sina Weibo picture text list fades in and out and scrolls up and down intermittently

2. The implementation principle is to first set the div to display only 4 pictures. The extra pictures will be automatically hidden. Then add an animation event to the pictures so that they can be scrolled and played. The up and down scrolling effect is played by the li tag. The content, pictures and text inside treat each li as a whole. When scrolling, they enter the div and are displayed. When they finally leave the div, they are hidden. Set a time for the entire animation effect to run completely.

3. Operating environment

It can be implemented in IE6 IE7 IE8 and above in Firefox and Google Chrome browsers

4. Create a new file for the compressed package of all pictures, and then unzip the package and put it into a folder. The compressed package of the pictures can be seen and downloaded at the bottom of the page. After downloading, there is no need to modify the folder name because it has already been written and The path within html5 matches

5. When saving the created html file, change the encoding type to (UTF-8 with signature) so that some Chinese characters can be displayed normally. Change the saving type (T) to (all files (*.*) ), put the html5 and decompressed image folders in the same folder

6. Code

Copy code The code is as follows:










jquery imitates Sina Weibo picture text list gap scrolling fade in and out scrolling






怎么样，效果相当不错吧。

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Use node.js to create the front and backend of the website_node.jsNext article：Use node.js to create the front and backend of the website_node.js

Related articles

See more