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动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
详解JavaScript中的链式调用
Nov 27 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
Thinkphp中的volist标签用法简介
2014/06/18 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
nodeJS微信分享
2017/12/20 NodeJs
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python字符串对其居中显示的方法
2015/07/11 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
应征英语教师求职信
2013/11/27 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
学历公证书范本
2014/04/09 职场文书
团日活动总结
2014/04/28 职场文书
学校三节实施方案
2014/06/09 职场文书
本科应届生求职信
2014/08/05 职场文书
2016情人节宣传语
2015/07/14 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android