jquery animation 3. 마스크 효과를 사용하여 그림 복도 만들기

jquery animation 3. 마스크 효과를 사용하여 그림 복도 만들기_jquery

WBOY

풀어 주다： 2016-05-16 17:50:34

원래의

1003명이 탐색했습니다.

 
#frame 
{ 
위치: 상대; 
너비: 700px; 
높이: 400px; 
오버플로: 숨김; 
z-색인: 0; 
} 
#frame img 
{ 
너비: 700px; 
높이: 400px; 
위치: 절대; 
상단: 0; 
왼쪽: 0; 
z-색인: 1; 
} 
#frame img.visible 
{ 
z-index: 2; 
} 
#frame a 
{ 
디스플레이: 블록; 
너비: 50%; 
높이: 100%; 
위치: 절대; 
상단: 0; 
z-색인: 10; 
색상: 투명; 
배경 이미지: url(transparent.gif); 
필터: 알파(불투명도 = 0); 
텍스트 정렬: 가운데; 
텍스트 장식: 없음; 
글꼴: 90px "Palatino Linotype" , "Book Antiqua" , Palatino, serif; 
줄 높이: 400%; 
} 
#frame a:hover 
{ 
color: #fff; 
텍스트 그림자: 0 0 5px #000; 
필터: 알파(불투명도 = 100); 
필터: 그림자(색상=#000, 방향=0); 
} 
#frame a:focus 
{ 
개요: 없음; 
} 
#prev 
{ 
왼쪽: 0; 
} 
#next 
{ 
오른쪽: 0; 
} 
#overlay 
{ 
너비: 100%; 
높이: 100%; 
위치: 절대; 
왼쪽: 0; 
상단: 0; 
z-색인: 3; 
} 
#overlay div 
{ 
위치: 절대; 
} 

接下来介绍jquery.tranzify.js?
　　第一步是搭建插件的骨架：

复aze代码代码如下:

 
(함수 ($) { 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: 함수(옵션) {return this; 
} 
}) ; 
})(jQuery); 

 
基本骨架有了,我们先来实现插件函数tranzify 实现。代码还是很简单的,就是获取当前的dom对象，对이 
/ /创建插件函数 
tranzify: function (options) { 

　　//扩 Exhibition配置
　　var config = $.extend($.tranzify.defaults, options);
　　//获取当前dom对象，传给config.selector

　　config.selector = "#" this.attr('id'); 　　//计算에서 내 정보를 찾아보세요 　　config.multi =parseInt(this.width()) / config.transitionWidth; 　　//创建插件　　$.tranzify.createUI(config); 　　//返回对象本身，实现链式效果　　 이것을 돌려주세요;

}

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

复代码

 代码如下:

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

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

复代码代码如下:

prevA = $('', {
id: config.prevID,
href: '#',
html: '«',
클릭: function (e) {
e.preventDefault();
//탐색 숨기기
$(config.selector).find('a').css('display', ' none');
//마스크 생성
$.tranzify.createOverlay(config);
//현재 표시 상태로 이미지 가져오기
var currImg = $('.' config. visibleClass, $(config.selector));
//현재 사진이 첫 번째 사진이 아닙니다
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)
}
//마스크 효과 실행
$.tranzify.runTransition(config)
}
}).appendTo(config.selector),
nextA = $(' < ;/a>', {
id: config.nextID,
href: '#',
html: '»',
click: function (e) {
e. PreventDefault ();//탐색 숨기기
$(config.selector).find('a').css('display', 'none')
//마스크 생성
$ .tranzify.createOverlay(config);
//현재 표시 상태의 사진 가져오기
var currImg = $('.' config.visibleClass, $(config.selector))
//The 현재 사진이 마지막 사진이 아닙니다
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 ) ;
}
}).appendTo(config.selector);

마지막으로 첫 번째 사진을 표시 상태로 설정하는 것을 잊지 마세요.

코드 복사 코드는 다음과 같습니다.

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

 
　마스크 레이어를 생성하는 코드는 아래와 같습니다. 주요 아이디어는 div 그룹을 만드는 것입니다. div의 배경은 현재 표시된 이미지입니다. 각 div CSS의 왼쪽 값과 배경의 backgroundPosition 값을 설정하면 이 div 그룹이 완전한 그림 효과를 형성합니다. 코드를 보면 한눈에 알 수 있을 것이다. 

코드 복사 코드는 다음과 같습니다.

//왼쪽 div 오프셋

var posLeftMarker = 0,
//div 배경 위치 오프셋
bgHorizMarker = 0,
//마스크 레이어의 전체 패키징 개체
overlay = $('

', {
id: config.containerID
});
//생성해야 하는 조각 수를 결정하는 루프
for (var i = 0; i < config.multi ; i ) {
//조각 만들기, 각 조각에는 현재 표시된 이미지의 일부만 포함됩니다
$('

', {
//너비 설정
width : config.transitionWidth,
//높이 설정
height: config.transitionHeight,
css: {
//배경 이미지 설정, 소스는 현재 표시된 이미지
backgroundImage: ' url(' $('.' config.visibleClass, $(config.selector)).attr('src') ')',
//배경 이미지의 크기를 다음과 같이 설정합니다. 외부 컨테이너의 높이와 너비와 일치합니다.
//이렇게 하면 이미지 크기에 관계없이 쉽게 크기가 일치합니다
backgroundSize: $(config.selector).width() ' px ' $(config.selector).height() 'px',
//배경 오프셋 설정
backgroundPosition: bgHorizMarker 'px 0',
//왼쪽 값 설정
left: posLeftMarker,
top: 0
}
}) .appendTo(overlay);//마스크 레이어 컨테이너에 추가
//오프셋 다시 계산
bgHorizMarker -= config.transitionWidth
posLeftMarker = config.transitionWidth;
}
//페이지에 마스크 레이어 컨테이너 추가
overlay.insertBefore('#' config.prevID)

확인 마스크 레이어를 실행하는 코드가 남았습니다. 이 코드도 매우 간단합니다. 마스크 레이어 아래에 있는 다양한 div를 가져와 애니메이션 효과를 추가하고 높이나 너비를 하나씩 0으로 변경하는 것입니다. 전체 애니메이션이 완료된 후 마스크 레이어 밖으로 이동합니다. 컨테이너.

코드 복사 코드는 다음과 같습니다.

 
//마스크 레이어 컨테이너 가져오기 
var transOverlay = $('#' config.containerID), 
//마스크 레이어 컨테이너 아래의 각 div 가져오기 
transEls = transOverlay.children (), 
len = transEls.length - 1; 
//구성에 따라 실행했지만 애니메이션 효과를 이해하지 못합니다
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; 
높이: 0 
}, 150, function () { 
if (counter === len) { 
transOverlay.remove() 
$(config.selector).find( "a").css("디스플레이", "블록"); 
counter ; 
strip(); 
} 
strip(); 
break; 
} 

 
자, 이제 콘텐츠가 끝났으므로 코드를 연결하여 최종 효과를 실행할 수 있습니다. 이 기사가 도움이 되기를 바랍니다. 
 데모 다운로드 주소: 
jQuery.animation.tranzify