js+css簡單翻書效果
阿新 • • 發佈:2021-01-13
//上下翻頁 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; padding:0} body,html{ overflow: hidden; } #box{ width:324px; height:576px; background-image: url("1.jpg"); background-repeat: no-repeat; background-size: 100% auto; position:relative; } #box .page{ width: 100%; height: 50%; bottom:0; left:0; position: absolute; transform-style: preserve-3d; transform-origin: center top; transition:1s all ease; z-index:2; transform:perspective(800px) rotateX(0deg); } #box .page div{ width:100%; height:100%; position:absolute; left:0; top:0; } #box .page .front{ /*顯示圖片的右半部分*/ background-image: url("1.jpg"); background-repeat: no-repeat; background-position: left bottom; background-size: 100% auto; /*不顯示背面*/ backface-visibility: hidden; /*層級比背面高*/ z-index:2; } #box .page .back{ background-image: url("2.jpg"); background-repeat: no-repeat; background-position: left top; background-size: 100% auto; z-index: 1; transform: scale(1,-1); } #box .page2{ width:100%; height:50%; position:absolute; bottom:0; left:0; background-image: url("2.jpg"); background-repeat: no-repeat; background-position: left bottom; background-size: 100% auto; z-index:1; } </style> </head> <body> <div id="box"> <div class="page"> <div class="front"></div> <div class="back"></div> </div> <div class="page2"></div> </div> </body> </html> <script type="text/javascript"> document.addEventListener('DOMContentLoaded',function(){ var oBox = document.getElementById('box'); var oPage = document.querySelector('.page'); var oPage2 = document.querySelector('.page2'); var oFront = document.querySelector('.front'); var oBack = document.querySelector('.back'); var iNow = 1; var bReady = true; oBox.onclick = function(){ if(bReady==false) { return; } bReady = false; iNow++; oPage.style.transition = '1s all ease'; oPage.style.WebkitTransform = 'perspective(800px) rotateX(180deg)'; }; oPage.addEventListener('transitionend',function(){ //1.瞬間拉回 oPage.style.transition = 'none'; oPage.style.WebkitTransform = 'perspective(800px) rotateY(0deg)'; oBox.style.backgroundImage = 'url("' + iNow + '.jpg")'; oFront.style.backgroundImage = 'url("' + iNow + '.jpg")'; var iNext = iNow+1; if(iNext > 3){ iNext = 1; iNow = 0; } oBack.style.backgroundImage = 'url("' + iNext + '.jpg")'; oPage2.style.backgroundImage = 'url("' + iNext + '.jpg")'; bReady = true; },false); },false); </script> //左右翻頁 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; padding:0} body,html{ /*防止抖動*/ overflow: hidden; } #box{ width:324px; height:576px; background-image: url("1.jpg"); background-repeat: no-repeat; background-size: auto 100%; position:relative; } #box .page{ /*在box的右半部分*/ width: 50%; height: 100%; top:0; right:0; position: absolute; /*開啟3d模式*/ transform-style: preserve-3d; /*設定旋轉中心*/ transform-origin: left center; transition:1s all ease; z-index:2; /*初始化*/ transform:perspective(800px) rotateX(0deg); } #box .page div{ width:100%; height:100%; position:absolute; left:0; top:0; } #box .page .front{ /*顯示圖片的右半部分*/ background-image: url("1.jpg"); background-repeat: no-repeat; background-position: right top; background-size: auto 100%; /*不顯示背面*/ backface-visibility: hidden; /*層級比背面高*/ z-index:2; } #box .page .back{ background-image: url("2.jpg"); background-repeat: no-repeat; background-position: left top; background-size: auto 100%; z-index: 1; transform: scale(-1,1); } #box .page2{ width:50%; height:100%; position:absolute; right:0; top:0; background-image: url("2.jpg"); background-repeat: no-repeat; background-position: right top; background-size: auto 100%; z-index:1; } </style> </head> <body> <div id="box"> <div class="page"> <div class="front"></div> <div class="back"></div> </div> <div class="page2"></div> </div> </body> </html> <script type="text/javascript"> document.addEventListener('DOMContentLoaded',function(){ var oBox = document.getElementById('box'); var oPage = document.querySelector('.page'); var oPage2 = document.querySelector('.page2'); var oFront = document.querySelector('.front'); var oBack = document.querySelector('.back'); var iNow = 1; var bReady = true; oBox.onclick = function(){ if(bReady==false) { return; } bReady = false; iNow++; oPage.style.transition = '1s all ease'; oPage.style.WebkitTransform = 'perspective(800px) rotateY(-180deg)'; }; oPage.addEventListener('transitionend',function(){ //1.瞬間拉回 oPage.style.transition = 'none'; oPage.style.WebkitTransform = 'perspective(800px) rotateY(0deg)'; //2.換圖 // oBox.style.background = 'url("'+(iNow%3)+'.jpg") no-repeat'; // oFront.style.background = 'url("'+(iNow%3)+'.jpg") right top no-repeat'; // oBack.style.background = 'url("'+((iNow+1)%3)+'.jpg") left top no-repeat'; // oPage2.style.background = 'url("'+((iNow+1)%3)+'.jpg") right top no-repeat'; oBox.style.backgroundImage = 'url("' + iNow + '.jpg")'; oFront.style.backgroundImage = 'url("' + iNow + '.jpg")'; var iNext = iNow+1; if(iNext > 3){ iNext = 1; iNow = 0; } oBack.style.backgroundImage = 'url("' + iNext + '.jpg")'; oPage2.style.backgroundImage = 'url("' + iNext + '.jpg")'; bReady = true; },false); },false); </script>