jquery realizes the shutter focus graph animation effect code sharing (with source download) _jquery

This is a jquery based shutter focus animation, and the previous introduction of the CSS3 shutter focus animation is different, it's better compatibility, more practical, because it is based on pure jquery, basically all browsers can support. The focus diagram of the picture toggle animation is the shutter of the animation way, but there are several different shutter animations, so it will not feel monotonous.

Online Demo Source Download

HTML code

<div id= "Slider" >
  
</div >

CSS Code

#slider {
position:relative;
width:600px;
Overflow:hidden;
margin:10px Auto 30px Auto;
}
#slider li {
position:absolute;
top:0;
left:0
}
. caption {
opacity:0.8;
Background: #000;
height:33px;
padding:5px 0 0 0;
Color: #fff;
Text-align:center;
FONT:25PX/1 ' Microsoft Ya-hei ';
z-index:200
}
. Prev-link,. next-link {
display:block;
width:24px;
height:24px;
Background-repeat:no-repeat;
Background-position:left top;
Position:absolute;
bottom:10px;
z-index:300
}
. Prev-link {
left:10px;
Background-image:url (prev.png);
Next-link {
left:40px;
Background-image:url (next.png);
Circle {
Display:block;
width:16px;
height:16px;
Background:url (circle-empty.png) no-repeat left top;
Position:absolute;
bottom:10px;
z-index:300
}
. circle-current {
background-image:url (circle-full.png);
}

JavaScript code

(function (a) {(function () {var b = false; var c = (/xyz/.test (function () {XYZ}))?
(/\b_super\b/): (/.*/); This.
Class = function () {}; Class.extend = function (h) {var g = This.prototype; b = true; var f = new This (), B = false; for (Var e in h) {if (Typeo F H[e] = = "function" && typeof g[e] = = "function" && c.test (h[e)) {F[e] = (function (i, j) {return funct 
Ion () {var l = this._super; this._super = G[i]; var k = j.apply (this, arguments); this._super = l; return k}}) (E, h[e])  else {F[e] = H[e]} function D () {if (!b && this.init) {this.init.apply (this, arguments)}} D.prototype =
F
D.constructor = D;
D.extend = Arguments.callee;
Return d}}) (); A.fn.lateralslider = function (b) {var d = {displayduration:2000, animateduration:1500, numcolumns:10, transitions: "F Ade,slideup,slidedown,slideleft,slideright,slideupanddown,slideleftandright,fadeandslideup,fadeandslidedown, Fadeandslideleft,fadeandslideright,fadeslideupandright,fadeslidedownandlEFT ", Random:false, Hideprevandnextarrows:false, Hideslidechooser:false, captionopacity:0.8};
var c = a.extend ({}, d, b); This.each (function () {var j = a (this); var t = class.extend ({$imgs: null, Size:null, Displayimg:null, Nextimg:null, n Umdivs:null, Divwidth:null, basecss:null, $divs: null, Transitions: [], Transition:null, Transitioncount:null, Interv Al:null, Width:null, Init:function () {this. $imgs = A ("img", j); this.size = this. $imgs. Size (); this. $imgs. Hide ();
. nextimg = 0;
This.width = J.width ();
This.numdivs = C.numcolumns;
This.divwidth = This.width/this.numdivs;
This.basecss = {width:this.divWidth, Position: "Absolute", top:0, backgroundrepeat: "No-repeat"};
This.createdivs ();
this. $divs = A ("div", j); This.transitioncount =-1}, Createdivs:function () {for (var A = 0; A < This.numdivs;
a++) {var B = a ("<div></div>");
B.css (THIS.BASECSS);
B.css ("left", This.divwidth * A);
B.appendto (J)}}});
var y = new T (); var g = Class.extend({baseduration:null, originaloffset:null, Offset:null, Init:function () {this.baseduration = C.ANIMATEDURATION/8; t
His.originaloffset = 7 * C.animateduration/(8 * y.numdivs);
This.offset = 7 * C.animateduration/(8 * y.numdivs)}, Duration:function () {return this.baseduration + This.offset}, Increment:function () {This.offset + = This.originaloffset}, Reset:function () {this.offset = This.originaloffset}, get Css:function (A) {return {}}, Eachdiv:function () {return {}}, Applytransition:function () {y. $divs. each (this.eachdiv
);
This.reset ()}); var v = g.extend ({applytransition:function () {var A = this, Y. $divs. each (function () {var B = A.eachdiv; if (typeof A.E
Achdiv = = "function") {b = B ()} A (this). Animate (b, a.duration ());
A.increment ()});
This.reset ()}); var m = v.extend ({getcssindex:null, eachdivindex:null, Getcssgroup:null, Eachdivgroup:null, Init:function () {this._
Super ();
This.getcssgroup = new Array ();
This.eachdivgroup = new Array (); This. Getcssindex = 0; This.eachdivindex = 0}, getcss:function (B) {var A = This.getcssgroup[this.getcssindex]; this.getcssindex = (This.getCSS
Index + 1)% This.getCSSGroup.length;
Return A (B)}, Addtransition:function (a) {This.getCSSGroup.push (A.GETCSS); This.eachDivGroup.push (A.eachdiv)}, Applytransition:function () {var A = this, Y. $divs. each (function () {var B = A.eachdivgroup[a.eachdivindex]; if (typeof (b)
= = "function") {b = B ()} A (this). Animate (b, a.duration ());
A.eachdivindex = (a.eachdivindex + 1)% A.eachdivgroup.length;
A.increment ()});
This.reset ()});
var u = v.extend ({getcss:function (A) {return {opacity:0}}, Eachdiv: {opacity:1}});
var f = v.extend ({getcss:function (A) {return {top:y. $imgs. EQ (y.nextimg). Height ()}, Eachdiv: {top:0}}); var h = v.extend ({getcss:function (A) {return {height:0}}, Eachdiv:function () {return {height:y. $imgs. EQ (y.nexti
MG). Height ()}});
var r = v.extend ({getcss:function (B) {var A = B.css ("left"); A = parSeint (a.substring (0, A.length-2), 10);
return {left:a + y.divwidth, width:0}}, Eachdiv: {left: ' = ' + Y.divwidth, Width:y.divwidth}});
var q = v.extend ({getcss:function (A) {return {width:0}}, Eachdiv: {width:y.divwidth}});
var o = m.extend ({addtransitions:function (A, B) {this.addtransition (a); This.addtransition (b)});
var w = m.extend ({addtransitions:function (b, A) {this.addtransition (b); This.addtransition (A)}});
var k = M.extend ({addtransitions:function (A, B) {this.addtransition (a); This.addtransition (b)});
var n = m.extend ({addtransitions:function (A, B) {this.addtransition (a); This.addtransition (b)}});
var p = m.extend ({addtransitions:function (A, B) {this.addtransition (a); This.addtransition (b)}});
var e = m.extend ({addtransitions:function (A, B) {this.addtransition (a); This.addtransition (B)}}); var x = m.extend ({addtransitions:function (A, C, B) {this.addtransition (a); This.addtransition (C); This.addtransition (b
)
}
}); var s =M.extend ({addtransitions:function (c, A, b) {this.addtransition (c); this.addtransition (A); This.addtransition (b)}); var z = {fade:new u (), Slideup:new f (), slidedown:new H (), Slideleft:new R (), Slideright:new Q (), Slideupanddown:ne W O (), Slideleftandright:new W (), Fadeandslideup:new K (), Fadeandslidedown:new N (), fadeandslideleft:new p (), FadeAndS
Lideright:new e (), Fadeslideupandright:new x (), Fadeslidedownandleft:new S ()};
Z.slideupanddown.addtransitions (Z.slideup, Z.slidedown);
Z.slideleftandright.addtransitions (Z.slideleft, z.slideright);
Z.fadeandslideup.addtransitions (Z.slideup, Z.fade);
Z.fadeandslidedown.addtransitions (Z.fade, Z.slidedown);
Z.fadeandslideleft.addtransitions (Z.fade, z.slideleft);
Z.fadeandslideright.addtransitions (Z.slideright, Z.fade);
Z.fadeslideupandright.addtransitions (Z.slideup, Z.fade, z.slideright);
Z.fadeslidedownandleft.addtransitions (Z.slidedown, Z.fade, z.slideleft); T.prototype.populatetransitions = function () {var B = C.transitioNs.split (/,\s*/g);
for (Var A in B) {This.transitions.push (Z[b[a]]}}; T.prototype.gettransition = function () {if (c.random) {var A = Math.floor (Math.random () * this.transitions.length); Retu RN This.transitions[a]} else {This.transitioncount = (this.transitioncount + 1)% This.transitions.length; return THIS.T
Ransitions[this.transitioncount]};
T.prototype.adddivcss = function () {var b = this; var C = b. $imgs. EQ (b.nextimg); var D = "url (" + c.attr ("src") + ")";
var A = C.height ();
this. $divs. each (function () {var E = a (this);
E.css ({backgroundimage:d, backgroundposition: "-" + e.css ("left") + "0px", height:a});
E.css (B.transition.getcss (E))})}; t.prototype.process = function () {j.css ({backgroundimage: "url (" + this. $imgs. EQ (this.displayimg). attr ("src") + ")", BA
Ckgroundrepeat: "No-repeat"});
This.transition = This.gettransition ();
This.adddivcss ();
This.transition.applyTransition ();
J.animate ({height:this. $imgs. EQ (this.nextimg). Height ()}, c.animateduration); This. Advanceshow ()};
T.prototype.updatecurrent = function () {A ('. circle[rel= ' + this.displayimg + ' "] '). Removeclass (" Circle-current ");
A ('. circle[rel= "' + this.nextimg + '"]). AddClass ("Circle-current")}; T.prototype.advanceshow = function () {this.updatecurrent (); this.displayimg = this.nextimg; if (this.nextimg = = This.siz
e-1) {this.nextimg = 0} else {this.nextimg++}}; T.prototype.startshow = function () {this.interval = Window.setinterval (A.proxy (This.runner, this), C.displayduration +
C.animateduration)};
T.prototype.stopshow = function () {Window.clearinterval (this.interval)}; T.prototype.gotoslide = function (A) {if (this. $divs. Filter (': Animated '). Size () > 0) {return} this.stopshow (); THIS.N
extimg = A;
This.updatecurrent ();
This.runner (); 
if (this.nextimg = = 0) {this.displayimg = this.size-1} else {this.displayimg = this.nextimg-1} this.startshow ()}; T.prototype.applylink = function () {var C = this. $imgs. EQ (this.displayimg); var B = C.parent (); if (B.is ("a")) {b.removeattr (" style ")} var A = this. $imgs. EQ (this.nextimg);
var D = a.parent (); if (D.is ("a")) {D.css ({display: "Block", TextDecoration: "None", border: "0", Width:j.width (), Height:a.height (), posi
tion: "Absolute", top:0, left:0, zindex:100})}; T.prototype.applycaption = function () {var A = this. $imgs. EQ (this.nextimg); var C = a.attr ("title"); var D = A (". Caption"
, j);
D.slideup (function () {A (this). html (C)}); if (C!= "") {if (d.size () > 0) {if (! D.is (": Visible")) {d.html (C)} d.slidedown ()} else {var B = a (' <div class= "caption" ><span> ' + C + "</spa
N></div> ");
B.css ({opacity:c.captionopacity, width:j.width (), Position: "Absolute", top:0, left:0, display: "None"});
B.appendto (j);
B.slidedown ()}};
T.prototype.runner = function () {this.applylink (); This.applycaption (); this.process ()}; T.prototype.begin = function () {var A = this. $imgs. EQ (this.nextimg); J.css ({backgroundimage: "url (" + a.attr ("src") + ") ", Height:a.heighT ()});
This.runner ();
this.transitioncount--;
This.startshow ()}; var i = class.extend ({circlecount:null, init:function () {this.circlecount = 0}, Addall:function () {This.addcircles (
);
This.addprevandnextlinks ();
A ("A.circle"). Click (This.circleclickhandler);
A (". Prev-link"). Click (This.prevlinkhandler);
A (". Next-link"). Click (This.nextlinkhandler); if (C.hideslidechooser) {A ("a.circle"). Hide ()} if (C.hideprevandnextarrows) {A (". Prev-link,. Next-link"). Hide ()}, ad Dcircles:function () {var A = this, Y. $imgs. each (function () {var B = A (' <a href= "#" rel= "' + A.circlecount + '" Class
= "Circle" ></a> ");
B.css ({right: (y.size-a.circlecount-1) * 20 + 10});
B.appendto (j); a.circlecount++})}, Addprevandnextlinks:function () {A (' <a href= "#" class= "Prev-link" ></a> "). Appendto (J
); A (' <a href= "#" class= "Next-link" ></a> "). Appendto (j)}, Circleclickhandler:function (B) {var a = parseint (A (
This). attr ("rel"), 10);
Y.gotoslide (A);
B.preventdefault ()}, Prevlinkhandler:function (B) {var a = y.displayimg-1; if (a < 0) {a = y.size-1} y.gotoslide (a); B.preventdefault ()}, Nextlinkhandler:function (B) {var a = y.displayimg + 1; if (a >= y.size) {a = 0} y.gotoslide (a
);
B.preventdefault ()});
var L = new I ();
L.addall ();
Y.populatetransitions ();
Y.begin ()}); Return This}}) (JQuery);

Of course, don't forget to refer to jquery's related library files in the Web page.

About jquery to achieve the shutter focus graph animation effect code sharing (with source download) to introduce you here, I hope to help you!