jquery 애니메이션 2. 요소 좌표 애니메이션 효과(그림 복도 생성)_jquery

효과 미리보기 사진:

데모를 다운로드하면 전체 효과를 볼 수 있습니다. 제작 과정은 아래와 같습니다.
　1. 먼저 html 페이지를 생성하면 html 구조는 다음과 같습니다

코드를 복사합니다 코드는 다음과 같습니다 :

< li class="hidden" id="prev">
• 이미지 2


• 이미지 3>
  
• 이미지 4


• 이미지 5


• »

누구나 알 수 있는 내용 뷰어에는 여러 사진이 포함되어 있습니다. ul 개체에는 '이전', '다음' 및 각 사진에 해당하는 탐색이 포함되어 있습니다.

2. 다음으로 이러한 html 요소에 대한 CSS 스타일을 설정해야 합니다. CSS에 대해 자세히 설명하지는 않겠습니다. 뷰어 및 사진과 같은 요소에 스타일을 추가하면 됩니다. :

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

#slider

{
너비: 500px;
위치: 상대 ;
}
#viewer
{
너비: 400px;
여백: 자동; : 상대;
오버플로: 숨겨진;
}
#slider ul
{
여백: 0
패딩: 0; -style-type: 없음
}
#slider ul:after
{
content: ".";
display: block
height; : 0;
지우기: 둘 다;
}
#slider li
{
여백-오른쪽:
float: 왼쪽; #다음
{
위치: 절대;
상단: 175px
}
#prev
{
왼쪽: 20px; 🎜>{
위치: 절대;
오른쪽:
}
.hidden
{
표시: 없음
}
#slide

너비: 2000px;
높이: 절대;
상단: 0;
왼쪽:
}
#slide img
🎜>float: 왼쪽;
너비: 300px;
}
#title
{
text-align: center; 🎜>}


3. 페이지에 jquery 및 jquery.easing.1.3.js에 대한 참조를 추가합니다. 그런 다음 탐색을 위해 해당 js 이벤트를 작성하는 기사의 주요 부분이 나옵니다.
먼저 5개의 이미지를 래핑할 새 div를 만들어야 합니다.




코드 복사


코드는 다음과 같습니다.


$('#viewer').wrapInner ('< ;div id="slide">

');

코드 복사

코드는 다음과 같습니다. var 컨테이너 = $('#slider' ), prev = 컨테이너.find('#prev'), prevChild = prev.find('a'), next = 컨테이너.find('#next').removeClass('hidden '),

nextChild = next.find('a'),

slide = Container.find('#slide')

두 개의 새로운 js 변수를 생성하고 키는 현재 활성 이미지 ID 및 세부 정보는 모든 사진의 해당 위치 및 제목 정보를 저장합니다.

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

key = "image1",
details = {
image1: {
위치: 0,
제목: Slide.children().eq(0).attr(' alt')
},
image2: {
위치: -400,
제목: Slide.children().eq(1).attr('alt')
},
image3: {
위치: -800,
제목: Slide.children().eq(2).attr('alt')
},
image4: {
위치 : -1200,
제목: Slide.children().eq(3).attr('alt')
},
image5: {
위치: -1600,
제목: Slide.children().eq(4).attr('alt')
}
};

이미지 제목을 표시하려면 h2 제목을 추가해야 합니다. 페이지로.

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

$('

', {
id: 'title',
text: Details[key].title
}).prependTo('#slider')

위 작업 완료 후 , a 태그에 클릭 이벤트가 추가되었습니다. 여기에는 두 가지 유형의 태그가 있는데, 하나는 '이전'과 '다음'이고 다른 하나는 각 사진에 해당하는 탐색입니다. 각각에 해당하는 클릭 이벤트를 추가해야 합니다. 하지만 모두 동일한 콜백 함수를 사용하게 됩니다. 먼저 콜백 함수 작성을 마치겠습니다. 댓글 형식으로 코드 아이디어를 직접 완성해보겠습니다.

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

function postAnim(dir) {
//먼저 숫자 부분만 포함된 현재 활성 이미지의 ID를 가져옵니다.
var keyMath =parseInt(key.match(/d $/))
　 //슬라이드의 왼쪽이 더 작습니다. 0보다 크면 현재 활성 이미지가 그림 1이 아니며 '이전' 탐색이 표시됩니다. 그렇지 않으면 '이전' 탐색이 사라집니다
(parseInt(slide.css('left')) < 0) ? prev.show() : prev.hide(); //슬라이드의 왼쪽은 -1600입니다. 이는 현재 활성 사진이 5장이고 '다음' 탐색이 사라짐을 의미합니다. 그렇지 않으면 '다음' ' 탐색 표시
(parseInt(slide.css('left') ) === -1600) ? next.hide() : next.show();
　
　 //if 조건문만 '이전' 및 '다음' 탐색을 사용할 때 의미가 있습니다. 구현된 기능은 '이전'을 클릭하면 키가 1씩 감소하고, '다음'을 클릭하면 키가 1씩 증가하는 것입니다.
if (dir) {
var titleKey = (dir === 'back') ? keyMath - 1 : keyMath 1;
key = 'image' titleKey;
}
　 //h2 제목 재설정
container.find('#title').text(details[key] .title);
//현재 활성화된 사진 재설정
container.find('.active').removeClass('active')
container.find('a[href=#' key) ']' ).addClass('active');
}

다음으로 '이전' 및 '다음' 탐색 기능을 완료합니다.

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

nextChild.add(prevChild).click( function (e ) {
// 기본 이벤트를 방지합니다. 그렇지 않으면 애니메이션 효과가 사라집니다.
e.preventDefault()
var arrow = $(this).parent()> / / 현재 슬라이드에 애니메이션이 없습니다. 새로운 애니메이션 효과를 추가할 때
　if (!slide.is(':animated')) {
slide.animate({
left: (arrow.attr(' id')) == = 'prev') ? ' =400' : '-=400'
}, 'slow', 'easeOutBack', function () {
(arrow.attr("id" ) === ") ? postAnim("back") : postAnim("forward")
})


이미지의 해당 탐색 기능 구현.

코드 복사

코드는 다음과 같습니다. $('#ui li a') .not( prevChild).not(nextChild).click(function (e) { //기본 이벤트 방지

　e.preventDefault();

　//현재 활성 사진 ID 가져오기
key = $(this ).attr('href').split('#')[1];
//애니메이션 효과 설정
　slide.animate({
left: 세부정보[key]. position
} , 'slow', 'easeOutBack', postAnim)
})


데모를 다운로드하면 기능이 어떻게 작동하는지 확인할 수 있습니다. 다음과 같이 구현됩니다.

데모 다운로드 주소:

jQuery.animation.position