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 相关文章推荐
基于jquery的多功能软键盘插件
Jul 25 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
js中split()方法得到的数组长度问题
Jul 19 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 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
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
img的onload的另类用法
2008/01/10 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Django 导出 Excel 代码的实例详解
2017/08/11 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
python生成器推导式用法简单示例
2019/10/08 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
无偿献血倡议书
2014/04/14 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
第一节英语课开场白
2015/06/01 职场文书
单身证明格式样本
2015/06/15 职场文书
学习委员竞选稿
2015/11/20 职场文书