CSS 변환 3D 슬라이드 효과 구현 단계 해석_javascript 기술

js

复代码 代码如下:

$(function() {
var length = $(".container a").length;
var $items = $(".container a")
$items.on("transitionend", function(event) {
$items.removeClass("trans");
})
$(".container a").each(function(index, value){
var $child = $( this);
if (index === 0) {
$child.addClass("현재 표시 중")
} else if (index === 1) {
$child.addClass ("왼쪽 표시");
} else if (index == 2) {
$child.addClass("out-left")
} else if (index == (length - 2) ) {
$child.addClass("오른쪽으로 표시");
} else if (index === (length - 1)) {
$child.addClass("오른쪽으로 표시")
} else {
$child.addClass("hiding");
}


$child.click(function(){
var $item = $( this);
//다음 항목
var $nextItem = (index === (length - 1)) ? $items.eq(0) : $items.eq(index 1)/ /이전 항목
var $preItem = (index === 0) ? $items.eq(length - 1) : $items.eq(index - 1)
var $rightItem
if( index == 0){
$rightItem = $items.eq(length - 2);
} else if (index == 1) {
$rightItem = $items.eq(length - 1);
} else {
$rightItem = $items.eq(index - 2);
}
var $leftItem;
if(index == length - 2){
$leftItem = $items.eq(0);
} else if (색인 == 길이 - 1) {
$leftItem = $items.eq(1);
} else {
$leftItem = $items.eq(색인 2);
}
//현재 항목 클릭, return
if ($item.hasClass("current")) {
return false;
} else if ($item.hasClass("left")) {
//가운데 오른쪽으로 이동
$preItem.attr("class","trans 오른쪽 표시");
//가운데 왼쪽으로 이동
$item.attr("class","trans current presents");
//오른쪽 항목 이동
$rightItem.attr("class","trans out-right");
//다음 왼쪽으로 이동
$nextItem.attr("class","trans left presents");
//왼쪽 준비
$leftItem.attr("class","out-left");
} else if ($item.hasClass("right")) {
//가운데 왼쪽으로 이동
$nextItem.attr("class","trans left presents");
//가운데 오른쪽으로 이동
$item.attr("class","trans current presents");
//왼쪽 항목 지우기
$leftItem.attr("class","trans out-left");
//이전 오른쪽으로 이동
$preItem.attr("class","trans 오른쪽 표시");
//맞습니다
$rightItem.attr("class","out-right");
};
});
});
});

html

复代码 代码如下:

<머리>
<제목>슬라이드쇼



<본문>

css

复主代码 代码如下:

body,div{margin: 0;padding: 0;}
.container{너비: 100%;높이: 450px; 위치: 상대;}
.container .wapper{마진: 0 자동; 너비: 480px;높이: 300px; 위치: 상대;-webkit-변환-스타일: 보존-3d;-webkit-관점: 1000px;-moz-변환-스타일: 보존-3d;-moz-관점: 1000px;}
.컨테이너 a{디스플레이: 블록; 위치: 절대; 왼쪽: 0; 상단: 0;-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);box- 그림자: 0px 1px 1px rgba(255,255,255,0.4); 커서: 포인터;}
.container a img{폭: 480px;height: 300px;display: block;border: 0;}
.container .current{ z-색인: 2;}
.container .left{-webkit-transform: 번역X(-350px) 번역Z(-200px) 회전Y(45deg);-moz-transform: 번역X(-350px) 번역Z(-200px) 회전Y(45deg);z-색인: 1;}
.container .right{-webkit-transform: 번역X(350px) 번역Z(-200px) 회전Y(-45deg);-moz-변환: 번역X(350px) 번역Z (-200px)rotateY(-45deg);z-index: 1;}
.showing{불투명도: 1;visibility: visible;}
.hiding{불투명도: 0;visibility: hide;}
.out-right{-webkit-transform:translateX(-450px)translateZ(-300px)rotateY(45deg);-moz-transform:translateX(-450px)translateZ(-300px)rotateY(45deg);z-index: 1 ;불투명도: 0;가시성: 숨김;}
.out-left{-webkit-transform: 번역X(450px) 번역Z(-300px) 회전Y(-45deg);-moz-변환: 번역X(450px) 번역Z(- 300px)rotateY(-45deg);z-index: 1;opacity: 0;visibility: hide;}
.trans{-webkit-transition: all 1 easy-in-out;-moz-transition: all 1s 이즈 -in-out;transition: all 1 이지인아웃;}