当前位置：Gxlcms > css > csstransform3D幻灯片特效

csstransform3D幻灯片特效

时间：2021-07-01 10:21:17 帮助过：27人阅读

JS

  1. [javascript]
  2. $(function(){ 
  3.     var length = $(".container a").length; 
  4.     var $items = $(".container a"); 
  5.  
  6.     $items.on("transitionend", function(event){ 
  7.         $items.removeClass("trans"); 
  8.     }); 
  9.  
  10.     $(".container a").each(function(index, value){ 
  11.         var $child = $(this); 
  12.         if (index === 0) { 
  13.             $child.addClass("current showing"); 
  14.         } else if (index === 1) { 
  15.             $child.addClass("left showing"); 
  16.         } else if (index == 2) { 
  17.             $child.addClass("out-left"); 
  18.         } else if (index == (length - 2)) { 
  19.             $child.addClass("out-right"); 
  20.         } else if (index === (length - 1)) { 
  21.             $child.addClass("right showing"); 
  22.         } else { 
  23.             $child.addClass("hiding"); 
  24.         };



  1.         $child.click(function(){ 
  2.             var $item = $(this); 
  3.             //next item   
  4.             var $nextItem = (index === (length - 1)) ?  $items.eq(0) : $items.eq(index + 1); 
  5.             //previous item  
  6.             var $preItem = (index === 0) ? $items.eq(length - 1) : $items.eq(index - 1); 
  7.             var $rightItem; 
  8.             if(index == 0){ 
  9.                 $rightItem = $items.eq(length - 2); 
  10.             } else if (index == 1) { 
  11.                 $rightItem = $items.eq(length - 1); 
  12.             } else { 
  13.                 $rightItem = $items.eq(index - 2); 
  14.             } 
  15.             var $leftItem; 
  16.             if(index == length - 2){ 
  17.                 $leftItem = $items.eq(0); 
  18.             } else if (index == length - 1) { 
  19.                 $leftItem = $items.eq(1); 
  20.             } else { 
  21.                 $leftItem = $items.eq(index + 2); 
  22.             }
  1.             //current item click,return  
  2.             if ($item.hasClass("current")) { 
  3.                 return false; 
  4.             } else if ($item.hasClass("left")) { 
  5.                 //center move right  
  6.                 $preItem.attr("class","trans right showing"); 
  7.                 //left move center  
  8.                 $item.attr("class","trans current showing"); 
  9.                 //right item move out  
  10.                 $rightItem.attr("class","trans out-right"); 
  11.                 //next move left  
  12.                 $nextItem.attr("class","trans left showing"); 
  13.                 //left ready  
  14.                 $leftItem.attr("class","out-left"); 
  15.             } else if ($item.hasClass("right")) { 
  16.                 //center move left  
  17.                 $nextItem.attr("class","trans left showing"); 
  18.                 //right move center  
  19.                 $item.attr("class","trans current showing"); 
  20.                 //left item clear  
  21.                 $leftItem.attr("class","trans out-left"); 
  22.                 //previous move right  
  23.                 $preItem.attr("class","trans right showing"); 
  24.                 //right ready  
  25.                 $rightItem.attr("class","out-right"); 
  26.             }; 
  27.         }); 
  28.     }); 
  29. });
  1. $(function(){
  2.  var length = $(".container a").length;
  3.  var $items = $(".container a");
  1.  $items.on("transitionend", function(event){
  2.   $items.removeClass("trans");
  3.  });
  1.  $(".container a").each(function(index, value){
  2.   var $child = $(this);
  3.   if (index === 0) {
  4.    $child.addClass("current showing");
  5.   } else if (index === 1) {
  6.    $child.addClass("left showing");
  7.   } else if (index == 2) {
  8.    $child.addClass("out-left");
  9.   } else if (index == (length - 2)) {
  10.    $child.addClass("out-right");
  11.   } else if (index === (length - 1)) {
  12.    $child.addClass("right showing");
  13.   } else {
  14.    $child.addClass("hiding");
  15.   };


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

css

  1. [css]
  2. body,div{margin: 0;padding: 0;} 
  3. .container{width: 100%;height: 450px; position: relative;} 
  4. .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;} 
  5. .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;} 
  6. .container a img{width: 480px;height: 300px;display: block;border: 0;} 
  7. .container .current{z-index: 2;} 
  8. .container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;} 
  9. .container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;} 
  10. .showing{opacity: 1;visibility: visible;} 
  11. .hiding{opacity: 0;visibility: hidden;} 
  12. .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;} 
  13. .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;} 
  14. .trans{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
  1. body,div{margin: 0;padding: 0;}
  2. .container{width: 100%;height: 450px; position: relative;}
  3. .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;}
  4. .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;}
  5. .container a img{width: 480px;height: 300px;display: block;border: 0;}
  6. .container .current{z-index: 2;}
  7. .container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;}
  8. .container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;}
  9. .showing{opacity: 1;visibility: visible;}
  10. .hiding{opacity: 0;visibility: hidden;}
  11. .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;}
  12. .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;}
  13. .trans{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}


demo
demo

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！