Heim > Artikel > Web-Frontend > CSS-Transformation 3D-Folieneffekt

CSS-Transformation 3D-Folieneffekt

高洛峰Original: 2016-11-24 11:35:191379Durchsuche

[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"); 
        };

        $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); 
            }

            //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"); 
            }; 
        }); 
    }); 
});

$(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");
  };

  $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);
   }

   //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");
   };
  });
 });
});

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>

<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>

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;}

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;}

Demo
Demo

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS implementiert erzwungenen Nicht-Zeilenumbruch/automatischen Zeilenumbruch/erzwungenen ZeilenumbruchNächster Artikel：CSS implementiert erzwungenen Nicht-Zeilenumbruch/automatischen Zeilenumbruch/erzwungenen Zeilenumbruch

In Verbindung stehende Artikel

Mehr sehen