search

Home  >  Article  >  Web Front-end  >  html5 menu origami effect_html5 tutorial skills

html5 menu origami effect_html5 tutorial skills

PHP中文网
PHP中文网Original
2016-05-16 15:47:581655browse

Similar to the user instructions when installing Cheetah Browser.

The effect after clicking

The code is as follows:

<!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>


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：A good example of HTML5 Canvas multi-layer click event monitoring_html5 tutorial skillsNext article：A good example of HTML5 Canvas multi-layer click event monitoring_html5 tutorial skills

Related articles

See more