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 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
jQuery实现大图轮播
Feb 13 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
详解Python3的TFTP文件传输
2018/06/26 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
Django中多种重定向方法使用详解
2019/07/17 Python
keras之权重初始化方式
2020/05/21 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
python 调整图片亮度的示例
2020/12/03 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
2016新年慰问信范文
2015/03/25 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书