Jquery Animation 2. element coordinate animation effect (create an image corridor)

Effect preview image:

You can download the demo to see the complete results. The following describes the production process.
1. Create an html page. The html structure is as follows: Copy codeThe Code is as follows: <div id = "slider">
<Div id = "viewer">





</Div>
<Ul id = "ui">
<Li class = "hidden" id = "prev"> <a href = "" title = "Previous"> «</a> </li>
<Li> <a href = "# image1" title = "Image 1" class = "active"> Image 1 </a> </li>
<Li> <a href = "# image2" title = "Image 2"> Image 2 </a> </li>
<Li> <a href = "# image3" title = "Image 3"> Image 3 </a> </li>
<Li> <a href = "# image4" title = "Image 4"> Image 4 </a> </li>
<Li> <a href = "# image5" title = "Image 5"> Image 5 </a> </li>
<Li class = "hidden" id = "next"> <a href = "" title = "Next">» </a> </li>
</Ul>
</Div>

At a glance, we can see that the viewer contains several images, and the ul object contains the navigation of the previous image and the next image.
2. Next, we need to set css styles for these html elements. I will not say much about css, but add styles to elements such as viewer and image. viewer can only display one image at the same time:Copy codeThe Code is as follows: # slider
{
Width: 500px;
Position: relative;
}
# Viewer
{
Width: 400px;
Height: 300px;
Margin: auto;
Position: relative;
Overflow: hidden;
}
# Slider ul
{
Width: 350px;
Margin: 0 auto;
Padding: 0;
List-style-type: none;
}
# Slider ul: after
{
Content :".";
Visibility: hidden;
Display: block;
Height: 0;
Clear: both;
}
# Slider li
{
Margin-right: 10px;
Float: left;
}
# Prev, # next
{
Position: absolute;
Top: 175px;
}
# Prev
{
Left: 20px;
}
# Next
{
Position: absolute;
Right: 10px;
}
. Hidden
{
Display: none;
}
# Slide
{
Width: 2000px;
Height: 300px;
Position: absolute;
Top: 0;
Left: 0;
}
# Slide img
{
Float: left;
Width: 400px;
Height: 300px;
}
# Title
{
Margin: 0;
Text-align: center;
}

3. Add jquery and jquery. easing.1.3.js references to the page. Next, let's rewrite this article and write corresponding js events for the navigation.
First, we need to create a new div to wrap 5 images.Copy codeThe Code is as follows: $ ('# viewer'). wrapInner ('<div id = "slide"> </div> ');

Next, we use the selector of jquery to find objects such as slider, slide, prev, And next and store them in the corresponding js variables.Copy codeThe Code is as follows: var container = $ ('# slider '),
Prev = container. find ('# prev '),
PrevChild = prev. find ('A '),
Next = container. find ('# next'). removeClass ('den den '),
NextChild = next. find ('A '),
Slide = container. find ('# slide ')

Create two new js variables, the key stores the id of the current active image, and the details stores the position and title information of all images.Copy codeThe Code is as follows: key = "image1 ",
Details = {
Image1 :{
Position: 0,
Title: slide. children (). eq (0). attr ('alt ')
},
Image2 :{
Position:-400,
Title: slide. children (). eq (1). attr ('alt ')
},
Image3 :{
Position:-800,
Title: slide. children (). eq (2). attr ('alt ')
},
Image4 :{
Position:-1200,
Title: slide. children (). eq (3). attr ('alt ')
},
Image5 :{
Position:-1600,
Title: slide. children (). eq (4). attr ('alt ')
}
};

To display the image title, we need to add an h2 title to the page.Copy codeThe Code is as follows: $ ('Id: 'title ',
Text: details [key]. title
}). PrependTo ('# slider ');

After completing the preceding steps, you can add a click event for the tag. Here, the tag can be divided into two types: 'pread' and 'Next ', the other is the navigation corresponding to each image. We need to add corresponding click events for them separately. However, they all use the same callback function. We will write the callback function first. I will directly annotate the code.Copy codeThe Code is as follows: function postAnim (dir ){
// First, we get the id of the current active image, which only contains digits.
Var keyMath = parseInt (key. match (/\ d + $ /));
// The left of the slide is smaller than 0. That is to say, the current active image is not image 1, and the previous navigation bar is displayed; otherwise, the previous navigation bar disappears.
(ParseInt(slide.css ('left') <0 )? Prev. show (): prev. hide ();
// The left of the slide is equal to-1600. That is to say, the current active image is the fifth chapter, and the 'Next' navigation disappears; otherwise, the 'Next' navigation is displayed.
(ParseInt(slide.css ('left') ===- 1600 )? Next. hide (): next. show ();
　　
// The if Condition Statement is meaningful only when the 'pread' and 'Next' are used for navigation. The function is to click 'previous 'to subtract one from the key, and Click 'Next' to add 1 to the key.
If (dir ){
Var titleKey = (dir = 'back ')? KeyMath-1: keyMath + 1;
Key = 'image' + titleKey;
}
// Reset the h2 title
Container. find ('# title'). text (details [key]. title );
// Reset the current picture to the active status
Container. find ('. active'). removeClass ('active ');
Container. find ('a [href = # '+ key +'] '). addClass ('active ');
}

Next, we will complete the navigation of 'pread' and 'Next.Copy codeThe Code is as follows: nextChild. add (prevChild). click (function (e ){
// Stop default events. Otherwise, the animation effect will disappear.
E. preventDefault ();
Var arrow = $ (this). parent ();
// When there is no animation in the current slide, we will add a new animation effect.
If (! Slide. is (': animated ')){
Slide. animate ({
Left: (arrow. attr ('id') = 'prev ')? '+ = 100':'-= 100'
}, 'Low', 'easeoutback', function (){
(Arrow. attr ("id") = "prev ")? PostAnim ("back"): postAnim ("forward ");
});
}
});

Finally, the implementation of the respective navigation functions of the image.Copy codeThe Code is as follows: $ ('# ui li A'). not (prevChild). not (nextChild). click (function (e ){
// Block default events
E. preventDefault ();
// Obtain the id of the current active image
Key = $ (this). attr ('href '). split (' # ') [1];
// Set the animation effect
Slide. animate ({
Left: details [key]. position
}, 'Low', 'easeoutback', postAnim );
});

The content of this lesson is complete. You can download the demo and view the functions as follows.

Demo: jQuery. animation. position