jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果


Posted in Javascript onAugust 24, 2012

主要的变化点有:把‘下一条'、‘上一条'的click事件抽象到一个函数showNext中。添加setInterval,添加selector元素的hover事件。好了,我们一个个的看。
showNext函数:

//显示函数 
function showNext(flag) { 
//隐藏导航 
$(config.selector).find('a').css('display', 'none'); 
//创建遮罩 
$.tranzify.createOverlay(config); //获取当前显示状态的图片 
var currImg = $('.' + config.visibleClass, $(config.selector)); 
if (flag === true) { 
//当前图片不是第一张图片 
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); 
} 
} else { 
//当前图片不是最后一张图片 
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); 
}

之所以要把他抽出来,是因为下面的setInterval里面也要用到它,不想有太多重复的代码,所以又必要抽出来,这样统一管理。接下来我们来看setIntervale。
//设置循环函数 
config.interval = setInterval(showNext, (config.multi * 150) + 3000);

其实就是添加一个循环函数,每个多少秒,运行一次showNext函数,显示下一张图片。这里要注意的一点是间隔时间的计算。还记得上一章中runTransition函数中给animate对象设置的间隔时间吗?横向显示设置为slow,也就是600毫秒。每一帧竖向显示设置的时间是150毫秒,一共有config.multi帧。(config.multi * 150)肯定大于600,所以我们这里就取(config.multi * 150)作为时间标准。为了防止动画刚运行完,就接着显示下一张图片,我们加了额外的3秒钟时间。

添加完循环函数后,我们为selector对象添加hover事件,当鼠标移动到对象上时,移出interval,鼠标移出时添加interval。

//鼠标移动到对象上,移出循环函数;鼠标移出,添加循环函数 
$(config.selector).hover(function () { 
clearInterval(config.interval); 
}, function () { 

config.interval = setInterval(showNext, (config.multi * 150) + 3000); 
});

这里我们要注意的是,我们把setInterval创造的对象传给了config.interval。这样做事为了保证上一步中创建的循环函数,删除的循环函数和删除的循环函数是同一个对象。很忌讳把setInterval创建的对象直接传给没有声明的interval,像这样:
interval = setInterval(showNext, (config.multi * 150) + 3000);

这样操作时把他传给了window对象的interval,很容易引起代码冲突。比如如果别的代码或者插件里面,也创建了一个setInterval对象,也同样传给了interval(等同于window.interval),那我们插件的clearInterval就会影响到别人代码的正常运行,同理别人的代码也会影响到我们。

最后为了代码的健壮性,我们给createOverlay添加了下面的代码,保证同时只有一个遮罩层:

//判断是否有没有运行完的补间动画,存在则立即结束动画,移出对象 
var transOverlay = $('#' + config.containerID); 
if (transOverlay) { 
transOverlay.stop(true, true); 

transOverlay.remove(); 
}

好了,需要讲解的对象都讲完了,大家还是直接下demo看效果吧。
demo下载地址:jQuery.animation.tranzify_improve.js
Javascript 相关文章推荐
JScript中的"this"关键字使用方式补充材料
Mar 08 Javascript
JavaScript面象对象设计
Apr 28 Javascript
JavaScript 闭包深入理解(closure)
May 27 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 #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
You might like
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
python实现猜拳游戏项目
2020/11/30 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
开幕式邀请函
2015/01/31 职场文书
聚会通知怎么写
2015/04/23 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang