登录  /  注册
首页 > web前端 > H5教程 > 正文

html5菜单折纸效果_html5教程技巧

PHP中文网
发布: 2016-05-16 15:47:58
原创
1468人浏览过

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

点击后效果

代码如下:

<!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(p, type) {// 得到css带单位的值
  var str = p.style[type];
  str = str.substring(0, str.length - 2);
  var value = parseInt(str);
  if (isNaN(value)) {
   value = 0;
  }
  return value;
 }
 function move(p, different, time) {
  var top = positionValue(p, "top");
  p.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>
  <p id="wrapper">
   <p id="up" class="paper">
    g
   </p>
   <p id="foldUp" class="paper">
    n
   </p>
   <p id="foldDown" class="paper">
    b
   </p>
   <p id="down" class="paper">
    t
   </p>
  </p>
  <button onclick=fold();>
   fold
  </button>
 </body>
</html>
登录后复制


智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号