html5菜单折纸效果

web8 · 发表于 2012-12-10 15:45:41

类似猎豹浏览器安装时的用户须知效果。

效果不是那么好，有那个意思，接缝比较大。
<div class="cnblogs_code"><!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>fold paper effect by gt</title>
  <style>
#wrapper {
-webkit-perspective: 55cm;
-webkit-perspective-origin: 50% 50%;
text-align: center;
}

.paper {
position: relative;
height: 40px;
width: 5em;
margin: 0;
background-color: aqua;
-webkit-transition: -webkit-transform 1s linear;
}
</style>
  <script type="text/javascript">
window.angel = 0;
window.timer;
function fold() {
  var foldUp = document.getElementById("foldUp");
  var foldDown = document.getElementById("foldDown");
  var down = document.getElementById("down");
  if (window.angel == 0) {
window.timer = setInterval(function() {
var diff = different(-1, 20);
console.log(foldUp.offsetTop)
move(foldUp, diff, 1);
move(foldDown, diff, 3);
move(down, diff, 4);
}, 40);
setTimeout(function() {
clearInterval(window.timer);
foldUp.style.top = "-20px";
foldDown.style.top = "-60px";
down.style.top = "-80px";
window.angel = -90;
}, 1030);
foldUp.style.webkitTransform = "rotateX(-90deg)";
foldDown.style.webkitTransform = "rotateX(90deg)";
  } else if (angel == -90) {
window.timer = setInterval(function() {
var diff = different(1, 20);
console.log(foldUp.offsetTop)
move(foldUp, diff, 1);
move(foldDown, diff, 3);
move(down, diff, 4);
}, 40);
setTimeout(function() {
clearInterval(window.timer);
foldUp.style.top = "0";
foldDown.style.top = "0";
down.style.top = "0";
window.angel = 0;
}, 1030);
foldUp.style.webkitTransform = "rotateX(0deg)";
foldDown.style.webkitTransform = "rotateX(0deg)";
  } else {
console.log(window.angel)
  }
}
function positionValue(div, type) {// 得到css带单位的值
  var str = div.style[type];
  str = str.substring(0, str.length - 2);
  var value = parseInt(str);
  if (isNaN(value)) {
value = 0;
  }
  return value;
}
function move(div, different, time) {
  var top = positionValue(div, "top");
  div.style.top = top + different * time + "px";
}
function different(direction, height) {
  var lastAngel = window.angel;
  window.angel += 3.6 * direction;
  var different = Math
.ceil((Math.cos(window.angel / 180 * Math.PI) - Math
   .cos(lastAngel / 180 * Math.PI))
   * height * 100) / 100;
  return different;
}
</script>
</head>
<body>
  <div id="wrapper">
<div id="up" class="paper">
g
</div>
<div id="foldUp" class="paper">
n
</div>
<div id="foldDown" class="paper">
b
</div>
<div id="down" class="paper">
t
</div>
  </div>
  <button onclick=fold();>
fold
  </button>
</body>
</html>

		自动登录	找回密码
密码			立即注册