当前位置:Gxlcms > JavaScript > JavaScript中transform实现数字翻页效果

JavaScript中transform实现数字翻页效果

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

效果图:

图(1)初始图

图(2)翻页过程

图(3)翻页结果

代码如下:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>transition</title>
  6. <style>
  7. #container{ width:500px; height:500px; margin:20px auto; background:#ff0000;
  8. -webkit-transiton:background 2s linear,width 2s,height 2s;
  9. -moz-transition:background 2s,width 2s,height 2s;
  10. -o-transition:background 2s,width 2s,height 2s;
  11. -ms-transition:background 2s,width 2s,height 2s;
  12. transition:background 2s,width 2s,height 2s;
  13. }
  14. #container:hover{ background: #00ff00;width:200px;height: 200px;}
  15. #my3dspace{
  16. -webkit-perspective:800;
  17. -webkit-perspective-origin:50% 50%;
  18. overflow: hidden;
  19. }
  20. #pagegroup{
  21. width: 400px;
  22. height: 400px;
  23. margin: 0 auto;
  24. -webkit-transform-style:preserve-3d;
  25. position: relative;
  26. }
  27. .page{
  28. width: 360px;
  29. height: 360px;
  30. padding: 20px;
  31. background-color: black;
  32. color: white;
  33. font-size: 360px;
  34. font-weight: blod;
  35. line-height: 360px;
  36. text-align: center;
  37. position: absolute;
  38. }
  39. #page1{
  40. -webkit-transform-origin:top;
  41. transform-origin:top;
  42. -webkit-transition:-webkit-transform 1s linear;
  43. transition:transform 1s linear;
  44. }
  45. #page2,#page3,#page4,#page5,#page6{
  46. -webkit-transform-origin:top;
  47. transform-origin:top;
  48. -webkit-transition:-webkit-transform 1s linear;
  49. transition:transform 1s linear;
  50. -webkit-transform:rotateX(-90deg);
  51. transform:rotateX(-90deg);
  52. }
  53. #op{
  54. text-align: center;
  55. margin: 40px auto;
  56. }
  57. </style>
  58. </head>
  59. <body>
  60. <div id="my3dspace">
  61. <div id="pagegroup">
  62. <div class="page" id="page1">1</div>
  63. <div class="page" id="page2">2</div>
  64. <div class="page" id="page3">3</div>
  65. <div class="page" id="page4">4</div>
  66. <div class="page" id="page5">5</div>
  67. <div class="page" id="page6">6</div>
  68. </div>
  69. </div>
  70. <div id="op">
  71. <a href="javascript:next()" rel="external nofollow" >next</a> 
  72. <a href="javascript:prev()" rel="external nofollow" >prev</a>
  73. </div>
  74. <script type="text/javascript">
  75. var curIndex = 1;
  76. function next(){
  77. if(curIndex==6)
  78. return;
  79. var curPage = document.getElementById("page"+curIndex);
  80. curPage.style.webkitTransform = "rotateX(90deg)";
  81. curPage.style.transform = "rotateX(90deg)";
  82. curIndex ++;
  83. var nextPage = document.getElementById("page"+curIndex);
  84. nextPage.style.webkitTransform="rotateX(0deg)";
  85. nextPage.style.transform="rotateX(0deg)";
  86. }
  87. function prev(){
  88. if(curIndex==1)
  89. return;
  90. var curPage =document.getElementById("page"+curIndex);
  91. curPage.style.webkitTransform="rotateX(-90deg)";
  92. curPage.style.transform="rotateX(-90deg)";
  93. curIndex --;
  94. var prevPage = document.getElementById("page"+curIndex);
  95. prevPage.style.webkitTransform="rotateX(0deg)";
  96. prevPage.style.transform="rotateX(0deg)";
  97. }
  98. </script>
  99. </body>
  100. </html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

人气教程排行