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 相关文章推荐
JavaScript 三种创建对象的方法
Oct 16 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 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拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
php5与php7的区别点总结
2019/10/11 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
Python中用Decorator来简化元编程的教程
2015/04/13 Python
python中的格式化输出用法总结
2016/07/28 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
python 实现屏幕录制示例
2019/12/23 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
Linux上比较文件的命令都有哪些
2013/09/28 面试题
优秀毕业生求职信范文
2014/01/02 职场文书
学徒工职责
2014/03/06 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA