html5菜单折纸效果
类似猎豹浏览器安装时的用户须知效果。
html文件代码，保存为html文件打开：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>fold paper effect by gt-柯乐义</title> 6 <style> 7 #wrapper { 8 -webkit-perspective: 55cm; 9 -webkit-perspective-origin: 50% 50%; 10 text-align: center; 11 } 12 .paper { 13 position: relative; 14 height: 40px; 15 width: 5em; 16 margin: 0; 17 background-color: aqua; 18 -webkit-transition: -webkit-transform 1s linear; 19 } 20 </style> 21 <script type="text/javascript"> 22 window.angel = 0; 23 window.timer; 24 function fold() { 25 var foldUp = document.getElementById("foldUp"); 26 var foldDown = document.getElementById("foldDown"); 27 var down = document.getElementById("down"); 28 if (window.angel == 0) { 29 window.timer = setInterval(function() { 30 var diff = different(-1, 20); 31 console.log(foldUp.offsetTop) 32 move(foldUp, diff, 1); 33 move(foldDown, diff, 3); 34 move(down, diff, 4); 35 }, 40); 36 setTimeout(function() { 37 clearInterval(window.timer); 38 foldUp.style.top = "-20px"; 39 foldDown.style.top = "-60px"; 40 down.style.top = "-80px"; 41 window.angel = -90; 42 }, 1030); 43 foldUp.style.webkitTransform = "rotateX(-90deg)"; 44 foldDown.style.webkitTransform = "rotateX(90deg)"; 45 } else if (angel == -90) { 46 window.timer = setInterval(function() { 47 var diff = different(1, 20); 48 console.log(foldUp.offsetTop) 49 move(foldUp, diff, 1); 50 move(foldDown, diff, 3); 51 move(down, diff, 4); 52 }, 40); 53 setTimeout(function() { 54 clearInterval(window.timer); 55 foldUp.style.top = "0"; 56 foldDown.style.top = "0"; 57 down.style.top = "0"; 58 window.angel = 0; 59 }, 1030); 60 foldUp.style.webkitTransform = "rotateX(0deg)"; 61 foldDown.style.webkitTransform = "rotateX(0deg)"; 62 } else { 63 console.log(window.angel) 64 } 65 } 66 function positionValue(div, type) {// 得到css带单位的值 67 var str = div.style[type]; 68 str = str.substring(0, str.length - 2); 69 var value = parseInt(str); 70 if (isNaN(value)) { 71 value = 0; 72 } 73 return value; 74 } 75 function move(div, different, time) { 76 var top = positionValue(div, "top"); 77 div.style.top = top + different * time + "px"; 78 } 79 function different(direction, height) { 80 var lastAngel = window.angel; 81 window.angel += 3.6 * direction; 82 var different = Math 83 .ceil((Math.cos(window.angel / 180 * Math.PI) - Math 84 .cos(lastAngel / 180 * Math.PI)) 85 * height * 100) / 100; 86 return different; 87 } 88 </script> 89 </head> 90 <body> 91 <div id="wrapper"> 92 <div id="up" class="paper"> 93 g 94 </div> 95 <div id="foldUp" class="paper"> 96 n 97 </div> 98 <div id="foldDown" class="paper"> 99 b 100 </div> 101 <div id="down" class="paper"> 102 t 103 </div> 104 </div> 105 <button onclick=fold();> 106 fold 107 </button> 108 </body> 109 </html>
