html5菜单折纸效果

最新推荐文章于 2024-02-08 21:26:12 发布

为啥强制昵称

最新推荐文章于 2024-02-08 21:26:12 发布

阅读量3.1k

点赞数

分类专栏：做网页文章标签： html5 function fold class div 浏览器

本文链接：https://blog.csdn.net/pouloghost/article/details/7687447

版权

做网页专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

效果不是那么好，有那个意思，接缝比较大。

<!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 οnclick=fold();>
   fold
  </button>
</body>
</html>

代码怎么这样了啊？？？？？？？？？？？？！！！！！！！！！！！！！！！！！

为啥强制昵称

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5菜单折纸效果

类似猎豹浏览器安装时的用户须知效果。效果不是那么好，有那个意思，接缝比较大。 fold paper effect by gt #wrapper { -webkit-perspective: 55cm; -webkit-perspective-origin: 50% 50%; text-align: center;}.paper {
复制链接

扫一扫

专栏目录