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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
Form表单上传文件(type="file")的使用
Aug 03 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
JavaScript中arguments的使用方法详解
Dec 20 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入门速成(2)
2006/10/09 PHP
PHP伪造referer实例代码
2008/09/20 PHP
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Django发送html邮件的方法
2015/05/26 Python
详解Django通用视图中的函数包装
2015/07/21 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
Structs界面控制层技术
2013/10/11 面试题
公司前台辞职报告
2014/01/19 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
计算机实训心得体会
2016/01/14 职场文书