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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
Python从MP3文件获取id3的方法
2015/06/15 Python
Python中标准模块importlib详解
2017/04/16 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
python range实例用法分享
2020/02/06 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
旅游管理本科生求职信
2013/10/14 职场文书
优秀英语专业毕业生求职信
2013/11/23 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
nginx中proxy_pass各种用法详解
2021/11/07 Servers
Python装饰器的练习题
2021/11/23 Python
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js