js簡單摺紙效果程式碼例項

admin發表於2017-04-15
JS

分享一段程式碼例項，它實現了簡單的摺紙效果。

點選按鈕能夠簡單模擬紙張的摺疊效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.b {
  width: 200px;
  height: 200px;
  position: relative;
}
.a {
  position: absolute;
  width: 50%;
  height: 50%;
  font-size: 20px;
  top: 0;
  left: 0;
  transform: perspective(800px) scale(1);
  background: rgba(255,255,255,0);
}
.a1 {
  background: red;
}
.a2:before, .a3:before, .a4:before, .a5:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: red;
  opacity: 0;
}
.a2 {
  transform: scale(1) rotateZ(90deg);
  top: 0;
  left: 50%;
}
.a3 {
  transform: scale(1) rotateZ(-180deg);
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
}
.a4 {
  transform: scale(1) rotateZ(90deg);
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  left: 100%;
}
.a5 {
  position: absolute;
  top: 100%;
  height: 100%;
  width: 200%;
  left: 0;
  transform: scale(1) rotateZ(180deg);
}
.contbox {
  position: absolute;
  top: 0;
  left: 0;
  height: 200%;
  width: 200%;
  visibility: hidden;
  background: #eae2d5;
  transition: all ease .1s;
  opacity: 0;
}
.show {
  opacity: 1;
  visibility: visible;
}
.fold2:before {
  animation: fold 2s 1 ease-in-out both .5s;
  transform-origin: 100% 100%;
}
.fold3:before {
  animation: fold 2s 1 ease-in-out both 1s;
  transform-origin: 100% 100%;
}
.fold4:before {
  animation: fold 2s 1 ease-in-out both 1.5s;
  transform-origin: 100% 100%;
}
.fold5:before {
  animation: fold 2s 1 ease-in-out both 1.9s;
  transform-origin: 100% 100%;
}
.back2:before {
  animation: back 2s 1 ease-in-out both 2s;
  transform-origin: 100% 100%;
}
.back3:before {
  animation: back 2s 1 ease-in-out both 1.5s;
  transform-origin: 100% 100%;
}
.back4:before {
  animation: back 2s 1 ease-in-out both 1s;
  transform-origin: 100% 100%;
}
.back5:before {
  animation: back 2s 1 ease-in-out both .5s;
  transform-origin: 100% 100%;
}
button {
  height: 80px;
  width: 140px;
  background: #399;
}
@keyframes fold {
  0%, 10% {
    transform: perspective(800px) rotateX(-180deg);
    opacity: 0;
  }
  25%, 100% {
    transform: perspective(800px) rotateX(0deg);
    opacity: 1;
  }
}
@keyframes back {
  0%, 10% {
    transform: perspective(800px) rotateX(0deg);
    opacity: 1;
  }
  25%, 100% {
    transform: perspective(800px) rotateX(-180deg);
    opacity: 0;
  }
}
@keyframes show {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}
</style>
<script>
window.onload = function() {
  var b = document.querySelector('.b'),
    pages = b.querySelectorAll('.a'),
    button = document.querySelector('button'),
    conbox = document.querySelector('.contbox'),
    bf = false;
 
  function hasClass(ele, sname) {
    var reg = new RegExp('\\b' + sname + '\\b');
    return reg.test(ele.className);
  }
 
  function addClass(ele, sname) {
    var sclass = ele.className,
      bool = hasClass(ele, sname);
    if (sclass) {
      if (!bool) {
        sclass += " " + sname;
        ele.className = sclass;
      }
    } else {
      ele.className = sname;
    }
  }
 
  function removeClass(ele, sname) {
    var reg = new RegExp('\\b' + sname + '\\b');
 
    if (sname && hasClass(ele, sname)) {
      ele.className = ele.className.replace(reg, "");
    }
  }
 
  function add(sclass) {
    addClass(conbox, 'show');
    bf = false;
  }
 
  function one() {
    bf = false;
  }
 
  function change(ele, status) {
 
    switch (status) {
      case null:
        ele.setAttribute('status', 'back');
        for (var i = 1; i < pages.length; i++) {
          addClass(pages[i], 'fold' + (i + 1));
          removeClass(pages[i], 'back' + (i + 1));
 
        }
        pages[pages.length - 1].addEventListener('webkitAnimationEnd', add, false)
 
        break;
 
      case 'fold':
        ele.setAttribute('status', 'back');
        for (var i = 1; i < pages.length; i++) {
          addClass(pages[i], 'fold' + (i + 1));
          removeClass(pages[i], 'back' + (i + 1));
        }
        pages[pages.length - 1].addEventListener('webkitAnimationEnd', add, false)
        break;
 
      case 'back':
        ele.setAttribute('status', 'fold');
        pages[pages.length - 1].removeEventListener('webkitAnimationEnd', add, false)
        pages[pages.length - 1].addEventListener('webkitAnimationEnd', one, false)
        removeClass(conbox, 'show');
        for (var i = 1; i < pages.length; i++) {
          addClass(pages[i], 'back' + (i + 1));
          removeClass(pages[i], 'fold' + (i + 1));
        }
        break;
    }
  }
 
  button.onclick = function() {
    var status = this.getAttribute('status');
    if (bf) {
      return;
    }
    bf = true;
    if (status) {
      change(this, status);
    } else {
      change(this, status)
    }
  }
}
</script>
</head>
<body>
  <button>檢視演示</button>
  <div class="b">
    <div class="a a1"></div>
    <div class="a a2 "></div>
    <div class="a a3"></div>
    <div class="a a4"></div>
    <div class="a a5"></div>
    <div class="contbox"></div>
  </div>
</body>
</html>

相關文章