Heim > Web-Frontend > js-Tutorial > jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果_jquery

jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果_jquery

WBOY
Freigeben: 2016-05-16 17:50:32
Original
1026 Leute haben es durchsucht

主要的变化点有:把‘下一条'、‘上一条'的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
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage