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


Posted in Javascript onMarch 14, 2016

这是一款基于jQuery的百叶窗焦点图动画,和之前介绍的CSS3百叶窗焦点图动画不同的是,它的兼容性更好,实用性更强,因为它是基于纯jQuery的,基本上所有浏览器都能够支持。焦点图的图片切换动画是百叶窗的动画方式,但也有几种不同的百叶窗动画,因此也不会觉得单调。

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

在线演示     源码下载

HTML代码

<div id="slider">
<img src="images/1.jpg" alt="三水点靠木1" title="三水点靠木大全" />
<img src="images/2.jpg" alt="三水点靠木2" title="三水点靠木大全" />
<img src="images/3.jpg" alt="三水点靠木3" title="三水点靠木大全" />
</div>

CSS代码

#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 '微软雅黑';
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代码

(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 (typeof h[e] == "function" && typeof g[e] == "function" && c.test(h[e])) {
f[e] = (function(i, j) {
return function() {
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: "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) {
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.nextImg).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: new o(),
slideLeftAndRight: new w(),
fadeAndSlideUp: new k(),
fadeAndSlideDown: new n(),
fadeAndSlideLeft: new p(),
fadeAndSlideRight: 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);
return this.transitions[A]
} else {
this.transitionCount = (this.transitionCount + 1) % this.transitions.length;
return this.transitions[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") + ")",
backgroundRepeat: "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.size - 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.nextImg = 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(),
position: "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 + "</span></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()
}
},
addCircles: 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);

当然不要忘记在网页中引用jQuery的相关库文件。

关于jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 Javascript
javascript实现数组去重的多种方法
Mar 14 #Javascript
javascript实现PC网页里的拖拽效果
Mar 14 #Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 #Javascript
node模块机制与异步处理详解
Mar 13 #Javascript
JS中创建函数的三种方式及区别
Mar 13 #Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 #Javascript
Javascript数组Array方法解读
Mar 13 #Javascript
You might like
论坛头像随机变换代码
2006/10/09 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
Python三元运算实现方法
2015/01/12 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
python字典一键多值实例代码分享
2019/06/14 Python
pow在python中的含义及用法
2019/07/11 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
国际政治个人自荐信范文
2013/11/26 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
建筑工地大门标语
2014/06/18 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
银行招聘自荐信
2015/03/06 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android