jquery realizes smart, cool flip-album Effects
Clever use of Html document properties, greatly reduce the amount of jquery code, to achieve a smart turn-by-turn album, compatibility is very good, the implementation of the Code and the label completely separated
? 1. [Code]jquery Implementation of smart Cool Flip album Effect
$ (document). Ready (function (e) {
var Imgbox = $ (". Img-box"),
Imgspan = Imgbox.find ("span"),
Imgdiv = $ (". Img-box div"),
Btnnext = $ ("#btn-next"),
Btnprve = $ ("#btn-prev"),
Btn = $ (". Btn"),
Speed = 600,
Set the animation's motion time
Tick = 4000 + speed,
Set the timer interval time
n = 1,
Set Number of Count counters
Whichcl,
Settings determine which button was clicked
z = 0; Set Current animation counter
Imgspan.html ("First" + N + "Zhang/Total" + imgdiv.length + "Zhang");
function Slider () {//Animation functions
if (whichcl = = "Nextcl") {
n++;
if (n > Imgdiv.length) {
n = 1;
}
z--;
if (Z < 0) {
z = imgdiv.length-1;
}
}
if (whichcl = = "Prevcl") {
n--;
if (n < 1) {
n = imgdiv.length;
}
}
Imgspan.html ("First" + N + "Zhang/Total" + imgdiv.length + "Zhang");
Imgdiv.eq (z). Stop (). Animate ({
Right:-(1.1 * imgdiv.width ())
},
Speed
function () {
if (whichcl = = "Nextcl") {
Imgspan.after ($ (this));
}
if (whichcl = = "Prevcl") {
Imgbox.append ($ (this));
}
$ (this). Stop (). Animate ({
right:0
},
Speed);
}) if (whichcl = = "Prevcl") {
z++;
if (Z > Imgdiv.length-1) {
z = 0;
} Beautiful Anime pictures
}http://www.huiyi8.com/dongman/weimei/?
Imgbox.stop (). Animate ({
right:100
},
Speed
function () {
$ (this). Stop (). Animate ({
right:0
},
Speed
}) Imgspan.stop (). Animate ({
left:395
},
Speed
function () {
$ (this). Stop (). Animate ({
left:295
},
Speed
})
}
Btnnext.click (next_cl = function () {
Whichcl = "NEXTCL";
Slider ();
}); Right click event to start animation function
Btnprve.click (prev_cl = function () {
Whichcl = "PREVCL";
Slider ();
}); Left click event to start animation function
Btn.hover (function () {
Cleartimeout (Autotime)
},
function () {
Autotime = SetInterval (NEXT_CL, Tick);
})//control the timer when the mouse enters the click button
Autotime = SetInterval (NEXT_CL, Tick); Simulate right-click events to start the animation function, or you can use PREV_CL to start the animation function to the left
});
?
jquery realizes smart, cool flip-album Effects