jquery animation 2. Element coordinate animation effect (create a picture corridor)_jquery

Effect preview picture:

You can download the demo to see the complete effect. The production process is introduced below.
　1. First create an html page, the html structure is as follows:

Copy the code The code is as follows:

< li class="hidden" id="prev">«

• Image 1


• Image 2


• Image 3


• Image 4


• Image 5


• »

Everyone can understand at a glance that the viewer contains several pictures, ul The object contains 'previous', 'next' and navigation corresponding to each picture.
2. Next, you need to set css styles for these html elements. I won’t go into more details about css, just add styles to elements such as viewers and pictures. The viewer can only display one picture at a time:

Copy code The 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 references to jquery and jquery.easing.1.3.js to the page. Then comes the main part of our article, writing the corresponding js events for navigation.
First we need to create a new div to wrap the 5 images.

Copy code The code is as follows:

$('#viewer').wrapInner('< ;div id="slide">

'); js variable.

Copy code The code is as follows: var container = $('#slider'),

prev = container.find('#prev'),

prevChild = prev.find('a'),
next = container.find('#next').removeClass('hidden'),
nextChild = next.find('a'),
slide = container.find('#slide')


Create two new js variables, the key saves the current active image ID and details save the respective position and title information of all pictures.

Copy code The 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')
}
};

In order to display the image title, we need to add an h2 title to the page.

Copy code The code is as follows:

$('

', {
id: 'title',
text: details[key].title
}).prependTo('#slider');

After the above work is completed, you can start to A click event has been added to the a tag. There are two types of a tags here, one is 'previous' and 'next', and the other is the navigation corresponding to each picture. We need to add corresponding click events for them respectively. But they will all use the same callback function. Let’s finish writing the callback function first. I will complete the code ideas directly in the form of comments.

Copy code The code is as follows:

function postAnim(dir) {
　 //First We get the ID of the current active image, which only contains the numeric part
var keyMath = parseInt(key.match(/d $/));
　 //The left of the slide is less than 0, which means that the current active image is not Picture 1, the 'previous' navigation is displayed; otherwise the 'previous' navigation disappears
(parseInt(slide.css('left')) < 0) ? prev.show() : prev.hide();
//The left of slide is equal to -1600, which means that the current active picture is Chapter 5, and the 'next' navigation disappears, otherwise the 'next' navigation displays
(parseInt(slide.css('left') ) === -1600) ? next.hide() : next.show();
　
　 //The if conditional statement only makes sense when using 'previous' and 'next' navigation. The implemented function is to click 'Previous' to decrease the key by one, and click 'Next' to increase the key by 1
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 which picture is currently active
container.find('.active').removeClass('active');
container.find('a[href=#' key ']' ).addClass('active');
}

Next we complete the 'previous' and 'next' navigation functions.

Copy code The code is as follows:

nextChild.add(prevChild).click(function (e ) {
// Prevent the default event, otherwise the animation effect will be gone
e.preventDefault();
var arrow = $(this).parent();
// The current slide has no animation When we add a new animation effect
　if (!slide.is(':animated')) {
slide.animate({
left: (arrow.attr('id')) == = 'prev') ? ' =400' : '-=400'
}, 'slow', 'easeOutBack', function () {
(arrow.attr("id") === "prev ") ? postAnim("back") : postAnim("forward");
});
}
});

Finally, the corresponding navigation of the image Function implementation.

Copy code The code is as follows:

$('#ui li a').not( prevChild).not(nextChild).click(function (e) {
//Prevent the default event
　e.preventDefault();
　//Get the current active picture id
key = $(this ).attr('href').split('#')[1];
//Set animation effect
　slide.animate({
left: details[key].position
} , 'slow', 'easeOutBack', postAnim);
});

The content of this lesson is complete. You can download the demo to see how the function is implemented as follows.

Demo download address: jQuery.animation.position