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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
学习YUI.Ext 第三天
Mar 10 Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
jQuery操作cookie
Aug 08 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
node+multer实现图片上传的示例代码
Feb 18 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,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
JavaScript中获取元素索引的函数
2010/09/10 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
python实现连接mongodb的方法
2015/05/08 Python
用python实现的线程池实例代码
2018/01/06 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
深入解析神经网络从原理到实现
2019/07/26 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
软件测试工程师面试问题精选
2016/10/28 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
2019军训心得体会
2019/06/27 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python