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 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
如何基于viewport vm适配移动端页面
Nov 13 Javascript
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 SQL之where语句生成器
2009/03/24 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
php技巧小结【推荐】
2017/01/19 PHP
php实现映射操作实例详解
2019/10/02 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
JQuery插入DOM节点的方法
2015/06/11 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
Linux下Python获取IP地址的代码
2014/11/30 Python
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
python修改字典键(key)的方法
2019/08/05 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
英语专业毕业个人求职自荐信
2013/09/21 职场文书
面试求职的个人自我评价
2013/11/16 职场文书
触摸春天教学反思
2014/02/03 职场文书
会议欢迎标语
2014/06/30 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
加薪申请报告范本
2015/05/15 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS