masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > css transform 3D幻灯片特效

css transform 3D幻灯片特效

高洛峰
Lepaskan： 2016-11-24 11:35:19
asal
1407 orang telah melayarinya

JS

[javascript]
$(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("current showing"); 
        } else if (index === 1) { 
            $child.addClass("left showing"); 
        } else if (index == 2) { 
            $child.addClass("out-left"); 
        } else if (index == (length - 2)) { 
            $child.addClass("out-right"); 
        } else if (index === (length - 1)) { 
            $child.addClass("right showing"); 
        } else { 
            $child.addClass("hiding"); 
        };
Salin selepas log masuk



        $child.click(function(){ 
            var $item = $(this); 
            //next item   
            var $nextItem = (index === (length - 1)) ?  $items.eq(0) : $items.eq(index + 1); 
            //previous item  
            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 (index == length - 1) { 
                $leftItem = $items.eq(1); 
            } else { 
                $leftItem = $items.eq(index + 2); 
            }
Salin selepas log masuk
            //current item click,return  
            if ($item.hasClass("current")) { 
                return false; 
            } else if ($item.hasClass("left")) { 
                //center move right  
                $preItem.attr("class","trans right showing"); 
                //left move center  
                $item.attr("class","trans current showing"); 
                //right item move out  
                $rightItem.attr("class","trans out-right"); 
                //next move left  
                $nextItem.attr("class","trans left showing"); 
                //left ready  
                $leftItem.attr("class","out-left"); 
            } else if ($item.hasClass("right")) { 
                //center move left  
                $nextItem.attr("class","trans left showing"); 
                //right move center  
                $item.attr("class","trans current showing"); 
                //left item clear  
                $leftItem.attr("class","trans out-left"); 
                //previous move right  
                $preItem.attr("class","trans right showing"); 
                //right ready  
                $rightItem.attr("class","out-right"); 
            }; 
        }); 
    }); 
});
Salin selepas log masuk
$(function(){
 var length = $(".container a").length;
 var $items = $(".container a");
Salin selepas log masuk
 $items.on("transitionend", function(event){
  $items.removeClass("trans");
 });
Salin selepas log masuk
 $(".container a").each(function(index, value){
  var $child = $(this);
  if (index === 0) {
   $child.addClass("current showing");
  } else if (index === 1) {
   $child.addClass("left showing");
  } else if (index == 2) {
   $child.addClass("out-left");
  } else if (index == (length - 2)) {
   $child.addClass("out-right");
  } else if (index === (length - 1)) {
   $child.addClass("right showing");
  } else {
   $child.addClass("hiding");
  };
Salin selepas log masuk


  $child.click(function(){
   var $item = $(this);
   //next item
   var $nextItem = (index === (length - 1)) ?  $items.eq(0) : $items.eq(index + 1);
   //previous item
   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 (index == length - 1) {
    $leftItem = $items.eq(1);
   } else {
    $leftItem = $items.eq(index + 2);
   }
Salin selepas log masuk
   //current item click,return
   if ($item.hasClass("current")) {
    return false;
   } else if ($item.hasClass("left")) {
    //center move right
    $preItem.attr("class","trans right showing");
    //left move center
    $item.attr("class","trans current showing");
    //right item move out
    $rightItem.attr("class","trans out-right");
    //next move left
    $nextItem.attr("class","trans left showing");
    //left ready
    $leftItem.attr("class","out-left");
   } else if ($item.hasClass("right")) {
    //center move left
    $nextItem.attr("class","trans left showing");
    //right move center
    $item.attr("class","trans current showing");
    //left item clear
    $leftItem.attr("class","trans out-left");
    //previous move right
    $preItem.attr("class","trans right showing");
    //right ready
    $rightItem.attr("class","out-right");
   };
  });
 });
});
Salin selepas log masuk
html
[html]
<html> 
<head> 
    <title>slideshow</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" href="http://www.php1.cn/"> </head> 
<body> 
    <div class="container"> 
        <div class="wapper"> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225608.jpg" alt="1" /></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225808.jpg" alt="2" /></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225977.jpg" alt="3"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225569.jpg" alt="4"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226120.jpg" alt="5"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226239.jpg" alt="6"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226255.jpg" alt="7"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226478.jpg" alt="8"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226691.jpg" alt="9"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226887.jpg" alt="10"/></a> 
        </div> 
    </div> 
     
    <script type="text/javascript" src="jquery-1.8.3.js"></script> 
    <script type="text/javascript" src="slide.js"></script> 
</body> 
</html>
Salin selepas log masuk
<html>
<head>
 <title>slideshow</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" type="text/css" href="http://www.php1.cn/"> </head>
<body>
 <div class="container">
  <div class="wapper">
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225608.jpg" alt="1" /></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225808.jpg" alt="2" /></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225977.jpg" alt="3"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225569.jpg" alt="4"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226120.jpg" alt="5"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226239.jpg" alt="6"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226255.jpg" alt="7"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226478.jpg" alt="8"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226691.jpg" alt="9"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226887.jpg" alt="10"/></a>
  </div>
 </div>
 
 <script type="text/javascript" src="jquery-1.8.3.js"></script>
 <script type="text/javascript" src="slide.js"></script>
</body>
</html>
Salin selepas log masuk

css

[css]
body,div{margin: 0;padding: 0;} 
.container{width: 100%;height: 450px; position: relative;} 
.container .wapper{margin: 0 auto; width: 480px;height: 300px; position: relative;-webkit-transform-style: preserve-3d;-webkit-perspective: 1000px;-moz-transform-style: preserve-3d;-moz-perspective: 1000px;} 
.container a{display: block;position: absolute;left: 0;top: 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-shadow: 0px 1px 1px rgba(255,255,255,0.4);cursor: pointer;} 
.container a img{width: 480px;height: 300px;display: block;border: 0;} 
.container .current{z-index: 2;} 
.container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;} 
.container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;} 
.showing{opacity: 1;visibility: visible;} 
.hiding{opacity: 0;visibility: hidden;} 
.out-right{-webkit-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);-moz-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);z-index: 1;opacity: 0;visibility: hidden;} 
.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: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
Salin selepas log masuk
body,div{margin: 0;padding: 0;}
.container{width: 100%;height: 450px; position: relative;}
.container .wapper{margin: 0 auto; width: 480px;height: 300px; position: relative;-webkit-transform-style: preserve-3d;-webkit-perspective: 1000px;-moz-transform-style: preserve-3d;-moz-perspective: 1000px;}
.container a{display: block;position: absolute;left: 0;top: 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-shadow: 0px 1px 1px rgba(255,255,255,0.4);cursor: pointer;}
.container a img{width: 480px;height: 300px;display: block;border: 0;}
.container .current{z-index: 2;}
.container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;}
.container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;}
.showing{opacity: 1;visibility: visible;}
.hiding{opacity: 0;visibility: hidden;}
.out-right{-webkit-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);-moz-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);z-index: 1;opacity: 0;visibility: hidden;}
.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: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
Salin selepas log masuk


demo
demo


Label berkaitan：
css transform
sumber：php.cn
Artikel sebelumnya：css实现强制不换行/自动换行/强制换行 Artikel seterusnya：css中文本换行属性word-wrap和white-space
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1335
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Ubah suai gaya CSS sebaris secara dinamik dalam Javafx Saya cuba menukar imej latar belakang anak tetingkap apabila aplikasi dimaksimumkan. Latar...
daripada 2024-04-06 20:57:16
0
1
487
Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS? Saya cuba membuat halaman web dengan dua lajur, dengan kandungan utama di satu pihak dan k...
daripada 2024-04-06 20:45:26
0
2
386
Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada? Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...
daripada 2024-04-06 20:41:51
0
1
518
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan