jquery动画3.创建一个带遮罩效果的图片走廊


Posted in Javascript onAugust 24, 2012
#frame 
{ 
position: relative; 
width: 700px; 
height: 400px; 
overflow: hidden; 
z-index: 0; 
} 
#frame img 
{ 
width: 700px; 
height: 400px; 
position: absolute; 
top: 0; 
left: 0; 
z-index: 1; 
} 
#frame img.visible 
{ 
z-index: 2; 
} 
#frame a 
{ 
display: block; 
width: 50%; 
height: 100%; 
position: absolute; 
top: 0; 
z-index: 10; 
color: transparent; 
background-image: url(transparent.gif); 
filter: alpha(opacity = 0); 
text-align: center; 
text-decoration: none; 
font: 90px "Palatino Linotype" , "Book Antiqua" , Palatino, serif; 
line-height: 400%; 
} 
#frame a:hover 
{ 
color: #fff; 
text-shadow: 0 0 5px #000; 
filter: alpha(opacity = 100); 
filter: Shadow(Color=#000, Direction=0); 
} 
#frame a:focus 
{ 
outline: none; 
} 
#prev 
{ 
left: 0; 
} 
#next 
{ 
right: 0; 
} 
#overlay 
{ 
width: 100%; 
height: 100%; 
position: absolute; 
left: 0; 
top: 0; 
z-index: 3; 
} 
#overlay div 
{ 
position: absolute; 
}

接下来介绍jquery.tranzify.js插件如何制作,该部分以讲解为主,插件的详细代码和如何使用,还是参照demo。

第一步是搭建插件的骨架:

(function ($) { 
$.tranzify = { 
defaults: { //默认配置 
transitionWidth: 40, //遮罩层每一小片段的宽度 
transitionHeight: '100%', //遮罩层每一小片段高度 
containerID: 'overlay', //遮罩层id 
transitionType: 'venetian',//默认遮罩层动画效果 
prevID: 'prev',//上一条导航ID 
nextID: 'next',//下一条导航ID 
visibleClass: 'visible' //可见性class 
}, 
//插件初始化操作 
createUI: function (config) { 
}, 
//创建遮罩层 
createOverlay: function (config) { 
}, 
//运行动画效果 
runTransition: function (config) { 
} 
}; 
$.fn.extend({ 
//创建插件函数 
tranzify: function (options) {return this; 
} 
}); 
})(jQuery);

基本骨架有了,我们先来实现插件函数tranzify的实现。代码还是很简单的,就是获取当前的dom对象,对其创建相关html元素和相应事件,最后把this返回回去,实现链式模式,代码如下:
//创建插件函数 
tranzify: function (options) { 
//扩展配置 

var config = $.extend($.tranzify.defaults, options); 

//获取当前dom对象,传给config.selector 

config.selector = "#" + this.attr('id'); 

//计算出我们需要创建的遮罩层片段数 

config.multi = parseInt(this.width()) / config.transitionWidth; 

//创建插件 

$.tranzify.createUI(config); 

//返回对象本身,实现链式效果 

return this; 
}

 接下来我们介绍createUI函数。首先获取图片总数:
var imgLength = $(config.selector).find('img').length,

接下来定义‘上一条'和‘下一条'导航,并添加到selector对象上。
prevA = $('<a></a>', { 
id: config.prevID, 
href: '#', 
html: '«', 
click: function (e) { 
e.preventDefault(); 
//隐藏导航 
$(config.selector).find('a').css('display', 'none'); 
//创建遮罩 
$.tranzify.createOverlay(config); 
//获取当前显示状态的图片 
var currImg = $('.' + config.visibleClass, $(config.selector)); 
//当前图片不是第一张图片 
if (currImg.prev().filter('img').length > 0) { 
//将上一张图片设置为可显示状态 
currImg.removeClass(config.visibleClass).prev().addClass(config.visibleClass); 
} else { 
//设置最后一张图片为可显示状态 
currImg.removeClass(config.visibleClass); 
$(config.selector).find('img').eq(imgLength - 1).addClass(config.visibleClass); 
} 
//运行遮罩效果 
$.tranzify.runTransition(config); 
} 
}).appendTo(config.selector), 
nextA = $('<a></a>', { 
id: config.nextID, 
href: '#', 
html: '»', 
click: function (e) { 
e.preventDefault(); 
//隐藏导航 
$(config.selector).find('a').css('display', 'none'); 
//创建遮罩 
$.tranzify.createOverlay(config); 
//获取当前显示状态的图片 
var currImg = $('.' + config.visibleClass, $(config.selector)); 
//当前图片不是最后一张图片 
if (currImg.next().filter('img').length > 0) { 
//将下一张图片设置为可显示状态 
currImg.removeClass(config.visibleClass).next().addClass(config.visibleClass); 
} else { 
//设置第一张图片为可显示状态 
currImg.removeClass(config.visibleClass); 
$(config.selector).find('img').eq(0).addClass(config.visibleClass); 
} 
//运行遮罩效果 
$.tranzify.runTransition(config); 
} 
}).appendTo(config.selector);

最后别忘记把第一张图片设置为显示状态。
$(config.selector).find('img').eq(0).addClass(config.visibleClass);

下面介绍创建遮罩层的代码。主要思路是:创建一组div,div的背景就是当前显示的图片,通过设置各个div css的left值,背景的backgroundPosition值,使这组div组成一个完整的图片效果。还是看代码吧,一看就一目了然了。

//div left的偏移量 
var posLeftMarker = 0, 
//div 背景position的偏移量 
bgHorizMarker = 0, 
//遮罩层总的包装对象 
overlay = $('<div></div>', { 
id: config.containerID 
}); 
//循环,确定需要创造的片段数 
for (var i = 0; i < config.multi; i++) { 
//创造片段,每个片段只包含当前显示图片的一部分图片 
$('<div></div>', { 
//设置宽度 
width: config.transitionWidth, 
//设置高度 
height: config.transitionHeight, 
css: { 
//设置背景图片,来源就是当前处于显示状态的图片 
backgroundImage: 'url(' + $('.' + config.visibleClass, $(config.selector)).attr('src') + ')', 
//设置背景图片大小,让他们和外部容器高度、宽度一致。 
//这样无论你图片的大小,都会和容易大小匹配 
backgroundSize: $(config.selector).width() + 'px ' + $(config.selector).height() + 'px', 
//设置背景偏移量 
backgroundPosition: bgHorizMarker + 'px 0', 
//设置left值 
left: posLeftMarker, 
top: 0 
} 
}).appendTo(overlay);//添加到遮罩层容器 
//重新计算偏移量 
bgHorizMarker -= config.transitionWidth; 
posLeftMarker += config.transitionWidth; 
} 
//遮罩层容器添加到页面 
overlay.insertBefore('#' + config.prevID);

ok, 只剩运行遮罩层的代码了。这段代码也很简单,就是获取遮罩层容易下面的各个div,对他们添加动画效果,逐个让他们的高度或者宽度变为0,等整个动画结束后,移出遮罩层容器。
//获取遮罩层容器 
var transOverlay = $('#' + config.containerID), 
//获取遮罩层容器下各div 
transEls = transOverlay.children(), 
len = transEls.length - 1; 
//根据配置运行不懂得动画效果 
switch (config.transitionType) { 
case 'venetian': 
transEls.each(function (i) { 
transEls.eq(i).animate({ 
width: 0 
}, 'slow', function () { 
if (i === len) { 
transOverlay.remove(); 
$(config.selector).find('a').css('display', 'block'); 
} 
}); 
}); 
break; 
case 'strip': 
var counter = 0; 
function strip() { 
transEls.eq(counter).animate({ 
height: 0 
}, 150, function () { 
if (counter === len) { 
transOverlay.remove(); 
$(config.selector).find("a").css("display", "block"); 
} else { 
counter++; 
strip(); 
} 
}); 
} 
strip(); 
break; 
}

好了,内容讲完了,把代码拼接起来就可以运行最终效果了。希望这篇文章对你有帮助。

demo下载地址:jQuery.animation.tranzify

Javascript 相关文章推荐
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
js+html实现点名系统功能
Nov 05 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 #Javascript
jquery动画1.加载指示器
Aug 24 #Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 #Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 #Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 #Javascript
javascript动态加载三
Aug 22 #Javascript
javascript动态加载二
Aug 22 #Javascript
You might like
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
PHP 文件上传限制问题
2019/09/01 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
便捷提取python导入包的属性方法
2018/10/15 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
幼儿园托班开学寄语
2014/01/18 职场文书
顶撞老师检讨书
2014/02/07 职场文书
中秋寄语大全
2014/04/11 职场文书
改革共识倡议书
2014/08/29 职场文书
黄河绝恋观后感
2015/06/08 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技