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保存当前路径(cookies记录)
Dec 14 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
微信小程序实现侧边分类栏
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
PHP 身份验证方面的函数
2009/10/11 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
解析Python中的异常处理
2015/04/28 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
Python之Class&Object用法详解
2019/12/25 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
电子商务专员岗位职责
2013/12/11 职场文书
房地产销售计划书
2014/01/10 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
群众路线党课主持词
2014/04/01 职场文书
应届生面试求职信
2014/07/02 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
员工给公司的建议书
2019/06/24 职场文书
导游词之西安骊山
2019/12/03 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python