jquery animation 3. Create a picture corridor with mask effect

jquery animation 3. Create a picture corridor with mask effect_jquery

WBOY

Release： 2016-05-16 17:50:34

Original

963 people have browsed it

 
#frame 
{ 
position: relative; 
width: 700px; 
height: 400px; 
overflow: hidden; 
z-index: 0; 
} 
#frame img 
{ 
width: 700px; 
height: 400px; 
position: absolute; 
top: 0; 
left: 0; 
z-index: 1; 
} 
#frame img.visible 
{ 
z-index: 2; 
} 
#frame a 
{ 
display: block; 
width: 50%; 
height: 100%; 
position: absolute; 
top: 0; 
z-index: 10; 
color: transparent; 
background-image: url(transparent.gif); 
filter: alpha(opacity = 0); 
text-align: center; 
text-decoration: none; 
font: 90px "Palatino Linotype" , "Book Antiqua" , Palatino, serif; 
line-height: 400%; 
} 
#frame a:hover 
{ 
color: #fff; 
text-shadow: 0 0 5px #000; 
filter: alpha(opacity = 100); 
filter: Shadow(Color=#000, Direction=0); 
} 
#frame a:focus 
{ 
outline: none; 
} 
#prev 
{ 
left: 0; 
} 
#next 
{ 
right: 0; 
} 
#overlay 
{ 
width: 100%; 
height: 100%; 
position: absolute; 
left: 0; 
top: 0; 
z-index: 3; 
} 
#overlay div 
{ 
position: absolute; 
} 

接下来介绍jquery.tranzify.js插件如何制作，该部分以讲解为主，插件的详细代码和如何使用，还是参照demo。
　　第一步是搭建插件的骨架：

复制代码代码如下:

 
(function ($) { 
$.tranzify = { 
defaults: { //默认配置 
transitionWidth: 40, //遮罩层每一小片段的宽度 
transitionHeight: '100%', //遮罩层每一小片段高度 
containerID: 'overlay', //遮罩层id 
transitionType: 'venetian',//默认遮罩层动画效果 
prevID: 'prev',//上一条导航ID 
nextID: 'next',//下一条导航ID 
visibleClass: 'visible' //可见性class 
}, 
//插件初始化操作 
createUI: function (config) { 
}, 
//创建遮罩层 
createOverlay: function (config) { 
}, 
//运行动画效果 
runTransition: function (config) { 
} 
}; 
$.fn.extend({ 
//创建插件函数 
tranzify: function (options) {return this; 
} 
}); 
})(jQuery); 

基本骨架有了，我们先来实现插件函数tranzify的实现。代码还是很简单的，就是获取当前的dom对象，对其创建相关html元素和相应事件，最后把this返回回去，实现链式模式，代码如下：

复制代码代码如下:

 
//创建插件函数 
tranzify: function (options) { 
　　//扩展配置 
　　var config = $.extend($.tranzify.defaults, options); 
　　//获取当前dom对象，传给config.selector 
　　config.selector = "#"   this.attr('id'); 
　　//计算出我们需要创建的遮罩层片段数 
　　config.multi = parseInt(this.width()) / config.transitionWidth; 
　　//创建插件 
　　$.tranzify.createUI(config); 
　　//返回对象本身，实现链式效果 
　　return this; 
} 

　接下来我们介绍createUI函数。首先获取图片总数：

复制代码代码如下:

var imgLength = $(config.selector).find('img').length,

接下来定义‘上一条'和‘下一条'导航，并添加到selector对象上。

复制代码代码如下:

prevA = $('', {
id: config.prevID,
href: '#',
html: '«',
click: function (e) {
e.preventDefault();
//Hide navigation
$(config.selector).find('a').css('display', ' none');
//Create a mask
$.tranzify.createOverlay(config);
//Get the image in the current display state
var currImg = $('.' config.visibleClass, $(config.selector));
//The current picture is not the first picture
if (currImg.prev().filter('img').length > 0) {
//Will Set the last picture to the displayable state
currImg.removeClass(config.visibleClass).prev().addClass(config.visibleClass);
} else {
//Set the last picture to be displayable Display status
currImg.removeClass(config.visibleClass);
$(config.selector).find('img').eq(imgLength - 1).addClass(config.visibleClass);
}
//Run mask effect
$.tranzify.runTransition(config);
}
}).appendTo(config.selector),
nextA = $('< ;/a>', {
id: config.nextID,
href: '#',
html: '»',
click: function (e) {
e.preventDefault ();
//Hide navigation
$(config.selector).find('a').css('display', 'none');
//Create mask
$ .tranzify.createOverlay(config);
//Get the picture in the current display state
var currImg = $('.' config.visibleClass, $(config.selector));
//The current picture is not The last picture
if (currImg.next().filter('img').length > 0) {
//Set the next picture to the displayable state
currImg.removeClass( config.visibleClass).next().addClass(config.visibleClass);
} else {
//Set the first picture to be displayable
currImg.removeClass(config.visibleClass);
$(config.selector).find('img').eq(0).addClass(config.visibleClass);
}
//Run the mask effect
$.tranzify.runTransition(config );
}
}).appendTo(config.selector);

Finally, don’t forget to set the first picture to display state.

Copy code The code is as follows:

$(config.selector).find('img' ).eq(0).addClass(config.visibleClass);

　The code for creating a mask layer is introduced below. The main idea is: create a group of divs. The background of the div is the currently displayed image. By setting the left value of each div css and the backgroundPosition value of the background, this group of divs forms a complete picture effect. Let's look at the code, it will be clear at a glance.

Copy code The code is as follows:

//Offset of div left
var posLeftMarker = 0,
//Offset of div background position
bgHorizMarker = 0,
//Total packaging object of mask layer
overlay = $('

', {
id: config.containerID
});
//Loop to determine the number of fragments that need to be created
for (var i = 0; i < config.multi; i ) {
//Create fragments, each fragment contains only a part of the currently displayed image
$('

', {
//Set the width
width : config.transitionWidth,
//Set the height
height: config.transitionHeight,
css: {
//Set the background image, the source is the currently displayed image
backgroundImage: ' url(' $('.' config.visibleClass, $(config.selector)).attr('src') ')',
//Set the size of the background image so that they are consistent with the height and width of the external container.
//In this way, no matter the size of your image, it will match the easy size
backgroundSize: $(config.selector).width() 'px ' $(config.selector).height() 'px',
//Set the background offset
backgroundPosition: bgHorizMarker 'px 0',
//Set the left value
left: posLeftMarker,
top: 0
}
}) .appendTo(overlay);//Add to mask layer container
//Recalculate offset
bgHorizMarker -= config.transitionWidth;
posLeftMarker = config.transitionWidth;
}
//Add the mask layer container to the page
overlay.insertBefore('#' config.prevID);

ok, only the code to run the mask layer is left. This code is also very simple. It is to get the various divs under the mask layer, add animation effects to them, and change their height or width to 0 one by one. After the entire animation is completed, move out of the mask layer container.

Copy code The code is as follows:

 
//Get the mask layer container 
var transOverlay = $('#' config.containerID), 
//Get each div under the mask layer container 
transEls = transOverlay.children (), 
len = transEls.length - 1; 
//Run according to the configuration and do not understand the animation effect
switch (config.transitionType) { 
case 'venetian': 
transEls.each (function (i) { 
transEls.eq(i).animate({ 
width: 0 
}, 'slow', function () { 
if (i === len) { 
transOverlay.remove(); 
$(config.selector).find('a').css('display', 'block'); 
} 
}); 
 }); 
break; 
case 'strip': 
var counter = 0; 
function strip() { 
transEls.eq(counter).animate({ 
height: 0 
}, 150, function () { 
if (counter === len) { 
transOverlay.remove(); 
$(config.selector).find("a"). css("display", "block"); 
} else { 
counter ; 
strip(); 
} 
}); 
} 
strip(); 
break; 
} 

Okay, now that the content is over, you can splice the code together to run the final effect. Hope this article is helpful to you.
Demo download address: jQuery.animation.tranzify