7 cool JQuery animations and practical JQuery applications, 7 practical jquery animations

7 cool JQuery animations and practical JQuery applications, 7 practical jquery animations

1. JQuery buffer loading image plug-in lazyload. js usage

Azyload. js is a JQuery-based plug-in that can be used to buffer and load images. If a webpage is long and has many images, it takes a lot of time to download the images, which affects the loading speed of the entire webpage, the image you want to view will be loaded based on your scrolling situation, and then it will request to download the image from the background and display it. With this plug-in, you can download images only when you need to display images. This reduces the pressure on the server and increases the page loading speed.

Online Demo

Source code download

2. Native Javascript image carousel, which can be automatically switched

An image carousel written in native Javascript can automatically switch over, but it has not yet been converted into any transition effect. The switchover is rather rigid. Let's take a look at it in detail. First, layout is not very difficult. It is mainly to use position: absolute to overlay n images, and then display the first one to hide others. display: none is available; or z-index implementation. In addition, there are several buttons so that they are always on top of all images. When the mouse clicks the button, the corresponding image appears. Here, the method of changing the z-index is used. When you see zIndex ++, you may have questions, but you can check the z-index range and then calculate it. The z-index range is the int Integer Range,

Online Demo

Source code download

3. A navigation bar with a bubble prompt created using the grumble. js plug-in

Grumble. js is a very special bubble shape prompt control. Today I use it to make a navigation bar. When the mouse moves into the menu option, a bubble prompt will appear, and the bubble prompt will disappear when the mouse moves out. First, traverse all the li elements. When you move the mouse to a li element, add a move event to the li element and add a "bubble". A new dom node is created. When you move the mouse away, delete all dynamically created dom nodes (clear "Bubbles ").

Online Demo

Source code download

4. Native Javascript for seamless image scrolling

An image written in native Javascript can be scrolled seamlessly and automatically. Let's take a look at it in detail. The first is the layout. It mainly uses the ul list to arrange n images and hide them when the parent container is exceeded. The other two buttons are used to change the scrolling direction, make them always on top of all images. To control the scrolling, you must first copy all the li in ul and connect them to the original li list so that the original li will not be blank after rolling, then, dynamically change xxx. style. left: Scroll the image. When all the images are halfway through, pull all the images back to the starting position at this moment, and then change the style. left to make its motion, so that repeated execution, all the images seem to be rolling in one direction continuously.

Online Demo

Source code download

5. Implementation of webpage skin replacement effect

When we access the Internet, we will see a lot of webpages with skin replacement functions, such as navigation websites, QQ mail switching themes, QQ space switching themes, and so on, and even to some client software, operating systems, in order to improve the user experience, all features of topic switching are available. How should we implement these features as a front-end developer? Today, we will give you a brief understanding of the skin rejuvenation of the web page.

At the beginning, we may wonder why different theme may appear? First of all, we should realize that these themes are also implemented by CSS styles. The reason why different themes appear is that CSS implements different styles for different themes, in short, theme 1 is controlled by style 1 and Theme 2 is controlled by style 2. Can we write several different style sheets on a page to control different styles, when we need to switch the topic, let's load the webpage into different style sheets. Is that all right? Let's give it a try.

Online Demo

Source code download

6. Implementation of Javascript cool digital clock

Sometimes we may need a better clock according to the actual situation. At this time, we may think of font control, but the font is limited, and the effect they present is still very simple, so what should we do? In fact, we need images. Each image is independent, and then different images are called through time changes so that they are displayed on the page to simulate the clock effect.

Online Demo

Source code download

7. Use CSS offset background image to implement div frames with small triangles

Now we can see a lot of boxes with small triangles, such as QQ for Mac and timeline of QQ space, there is a rectangle with a small triangle around the content in the chat or published status. It looks very good. This time, we used the offset background image method.

Online Demo

Source code download

Jquery ease of use

Ease of use, good performance, and slightly higher overhead.

Unless it is a large project, you can use JQUERY

In addition, pay special attention to the use of selectors in JQUERY.

How can we use jquery's animate method to achieve an animation effect?

Let's talk about the second question first:
Odd row: even, even row odd
Your situation is
$ ("Table> tr: even") returns an odd number of rows.
$ ("Table> tr: odd") gets an even number of rows, and then calls css or attr ("class ", "...").

First question:
It is not clear whether you want to scroll up or in what direction, but you can use the. delay () method for delayed loading. Just do a recursive load.
Click zoom in to create two layers. The width and height of one layer are both 100%. You can use fadeTo to set transparency to cover the background (note that the z-index attribute is set ), you can use ajax to obtain images and load them to the second layer. clone method.
We recommend that LZ find an api. You can find the answer to most of the questions above. If you want it, I have an API of the Chinese version JQuery1.4.