jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)

2020-05-29 06:58:41易采站长站整理

var d = {
displayDuration: 2000,
animateDuration: 1500,
numColumns: 10,
transitions: "fade,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,
numDivs: null,
divWidth: null,
baseCSS: null,
$divs: null,
transitions: [],
transition: null,
transitionCount: null,
interval: null,
width: null,
init: function() {
this.$imgs = a("img", j);
this.size = this.$imgs.size();
this.$imgs.hide();
this.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;
this.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
},
getCSS: 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.eachDiv) == "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.getCSSIndex + 1) % this.getCSSGroup.length;
return A(B)
},
addTransition: function(A) {