js简单折纸效果代码实例
分类：实例代码
分享一段代码实例，它实现了简单的折纸效果。
点击按钮能够简单模拟纸张的折叠效果，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>
js简单折纸效果代码实例，这样的场景在实际项目中还是用的比较多的，关于js简单折纸效果代码实例就介绍到这了。
js简单折纸效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。