当前位置: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. $items.on("transitionend", function(event){
  6. $items.removeClass("trans");
  7. });
  8. $(".container a").each(function(index, value){
  9. var $child = $(this);
  10. if (index === 0) {
  11. $child.addClass("current showing");
  12. } else if (index === 1) {
  13. $child.addClass("left showing");
  14. } else if (index == 2) {
  15. $child.addClass("out-left");
  16. } else if (index == (length - 2)) {
  17. $child.addClass("out-right");
  18. } else if (index === (length - 1)) {
  19. $child.addClass("right showing");
  20. } else {
  21. $child.addClass("hiding");
  22. };



  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. <script type="text/javascript" src="jquery-1.8.3.js"></script>
  24. <script type="text/javascript" src="slide.js"></script>
  25. </body>
  26. </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. <script type="text/javascript" src="jquery-1.8.3.js"></script>
  22. <script type="text/javascript" src="slide.js"></script>
  23. </body>
  24. </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

人气教程排行