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 === (長さ - 1)) {
$child.addClass("右表示"); 🎜>} else {
$child.addClass("hiding")
};


$child.click(function(){
var $item = $( this);
//次のアイテム
var $nextItem = (index === (length - 1)) $items.eq(index 1); /前の項目
var $preItem = (index === 0) : $items.eq(index - 1);インデックス == 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 (index == length - 1) {
$leftItem = $items.eq(1);
} else {
$leftItem = $items.eq(index 2);
}
//現在のアイテム click,return
if ($item.hasClass("current")) {
return false;
} else if ($item.hasClass("left")) {
//中央を右に移動
$preItem.attr("class","trans right Showing");
//中心を左に移動
$item.attr("class","trans current missing");
//右項目を外側に移動
$rightItem.attr("class","trans out-right");
//次に左に移動します
$nextItem.attr("class","trans left missing");
//準備完了
$leftItem.attr("class","out-left");
} else if ($item.hasClass("right")) {
//中央を左に移動
$nextItem.attr("class","trans left Showing");
//中心を右に移動
$item.attr("class","trans current missing");
//左項目クリア
$leftItem.attr("class","trans out-left");
//前に右に移動
$preItem.attr("class","trans right missing");
//準備完了
$rightItem.attr("class","out-right");
};
});
});
});



html

复制代码

代码如下:

<

css

复制代码代码如下:

body,div{マージン: 0;パディング: 0;}
.container{幅: 100%;高さ: 450px;位置: 相対;}
.container .wapper{マージン: 0 auto;幅: 480ピクセル;高さ: 300ピクセル;位置:相対;-webkit-transform-style:preserve-3d;-webkit-perspective:1000px;-moz-transform-style:preserve-3d;-moz-perspective:1000px;}
.container a{display:ブロック;位置: 絶対;左: 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;高さ: 300px;表示: ブロック;ボーダー: 0;}
.container .current{ z-index: 2;}
.container .left{-webkit-transform:translateX(-350px)translateZ(-200px)rotateY(45deg);-moz-transform:translateX(-350px)translateZ(-200px)回転 Y(45 度);z-index: 1;}
.container .right{-webkit-transform: トランスレート X(350 ピクセル) トランスレート Z(-200 ピクセル) 回転 Y(-45 度);-moz-transform: トランスレート X(350 ピクセル) トランスレート Z (-200px)rotateY(-45deg);z-index: 1;}
.showing{不透明度: 1;可視性: 可視;}
.hiding{不透明度: 0;可視性: 非表示;}
.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:translateX(450px)translateZ(-300px)rotateY(-45deg);-moz-transform:translateX(450px)translateZ(- 300px)rotateY(-45deg);z-index: 1;opacity: 0;visibility: hidden;}
.trans{-webkit-transition: すべて 1 のイーズインアウト;-moz-transition: すべて 1 のイーズ-in-out;transition: すべて 1 の easy-in-out;}