jquery 애니메이션 4. 마스크 효과가 있는 그림 복도의 업그레이드 버전--자동 실행 효과 포함_jquery

주요 변경 사항은 '다음' 및 '이전' 클릭 이벤트를 showNext 함수로 추상화하는 것입니다. setInterval을 추가하고 선택기 요소의 호버 이벤트를 추가합니다. 좋습니다. 하나씩 살펴보겠습니다.
showNext 함수:

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

//Display function
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 객체에 설정된 간격을 아직도 기억하시나요? 수평 표시는 느리게(600밀리초)로 설정됩니다. 각 프레임의 세로 표시 설정 시간은 150밀리초이며 총 config.multi 프레임이 있습니다. (config.multi * 150)은 확실히 600보다 크므로 여기서는 (config.multi * 150)을 시간 표준으로 사용합니다. 애니메이션이 종료되자마자 다음 이미지가 표시되는 것을 방지하기 위해 3초를 추가로 추가하였습니다.

루프 기능을 추가한 후 선택기 개체에 대한 호버 이벤트를 추가합니다. 마우스가 개체로 이동하면 간격이 밖으로 이동하고 마우스가 밖으로 이동하면 간격이 추가됩니다.

코드 복사

코드는 다음과 같습니다. //오브젝트에 마우스를 가져다 대고 루프 기능 밖으로 이동; 마우스를 밖으로 이동하고 루프 기능 $(config.selector).hover(function () { 　clearInterval(config.interval);

}, function ()을 추가합니다. {

　config.interval = setInterval( showNext, (config.multi * 150) 3000)
});　


여기서 주목해야 할 점은 Interval을 config.interval로 설정합니다. 이는 이전 단계에서 생성된 루프 함수, 삭제된 루프 함수 및 삭제된 루프 함수가 동일한 객체인지 확인하기 위해 수행됩니다. 다음과 같이 setInterval에 의해 생성된 객체를 선언되지 않은 간격에 직접 전달하는 것은 매우 금기시됩니다.

코드 복사

코드는 다음과 같습니다. 다음과 같습니다: interval = setInterval(showNext, (config.multi * 150) 3000)

이렇게 하면 window 객체의 간격으로 전달됩니다. , 이로 인해 코드 충돌이 쉽게 발생할 수 있습니다. 예를 들어, 다른 코드나 플러그인에서 setInterval 객체가 생성되어 간격(window.interval과 동일)에 전달되면 우리 플러그인의 ClearInterval이 다른 사람 코드의 정상적인 작동에 영향을 미치며 동일하게 적용됩니다. 다른 사람의 코드에도 영향을 미칩니다.

마지막으로 코드의 견고성을 위해 createOverlay에 다음 코드를 추가하여 동시에 마스크 레이어가 하나만 있도록 했습니다.

코드 복사

코드는 다음과 같습니다.

//실행이 완료된 트윈 애니메이션이 있는지 확인합니다. 존재하는 경우 즉시 애니메이션을 종료하고 개체를 제거합니다.
var transOverlay = $('#' config.containerID); 🎜>if (transOverlay) {
transOverlay.stop(true, true);
transOverlay.remove()
}

자, 설명해야 할 것은 모두 끝났습니다. 설명을 살펴보겠습니다. 이제 데모를 통해 효과를 살펴보겠습니다.
데모 다운로드 주소:
jQuery.animation.tranzify_improve.js