帝王谷资源网 Design By www.wdxyy.com
主要的变化点有:把‘下一条'、‘上一条'的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
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
标签:
遮罩效果,图片走廊
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月30日
2024年10月30日
- 群星《乘风2024 第6期》[FLAC/分轨][170.72MB]
- 陈立强1995-我爱你胜过这世界[福茂][WAV+CUE]
- 群星-《2014年十大发烧唱片精选HQCD》[低速原抓WAV+CUE]
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】