原生JS實現(xiàn)翻書特效
更新時間:2021年10月15日 12:04:54 作者:aiguangyuan
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)翻書特效,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文給大家分享一個用原生JS實現(xiàn)的翻書效果圖,效果如下:
實現(xiàn)代碼如下,歡迎大家復制粘貼。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>原生JS實現(xiàn)翻書特效</title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } #btn { width: 50px; height: 40px; line-height: 40px; position: relative; left: 50%; margin-left: -25px; top: 100px; } #book { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -300px; border: 1px solid black; /* 第一個封面 */ background: url(images/0.jpg); } #rightPage { width: 50%; height: 100%; position: absolute; left: 50%; z-index: 2; transition: 0.5s; transform: perspective(800px) rotateY(0px); transform-origin: left center; background: black; transform-style: preserve-3d; } #rightPage #topNode { position: absolute; width: 100%; height: 100%; /* 第一個封面 */ background: url(images/0.jpg) 300px 0; transform: translateZ(1px); } #rightPage #bottomNode { position: absolute; width: 100%; height: 100%; /* 第三個封面 */ background: url(images/2.jpg) 0 0; /*scaleX將翻書鏡像后的圖像還原鏡像*/ transform: translateZ(-1px) scaleX(-1); } #rightOtherPage { position: absolute; left: 50%; height: 100%; width: 50%; /* 第三個封面 */ background: url(images/2.jpg) 300px 0; z-index: 1; } </style> </head> <body> <input type='button' value='下一頁' id='btn'> <div id='book'> <div id='rightPage'> <div id='topNode'></div> <div id='bottomNode'></div> </div> <div id='rightOtherPage'></div> </div> <script type="text/javascript"> var index = 0; var flag = false; btn.onclick = function () { if (flag) return; flag = true; index++; rightPage.style.transition = '0.5s'; rightPage.style.transform = 'perspective(800px) rotateY(-180deg)'; setTimeout(function () { // 翻頁后瞬間更換下一頁的背景 book.style.backgroundImage = 'url(images/' + (index % 2 + 1) + '.jpg)'; // 讓翻頁瞬間回去 rightPage.style.transition = '0s'; rightPage.style.transform = 'perspective(800px) rotateY(0deg)'; // 更換翻頁紙正面背景 topNode.style.backgroundImage = 'url(images/' + (index % 2 + 1) + '.jpg)'; // 更換翻頁紙背面背景 bottomNode.style.backgroundImage = 'url(images/' + ((index + 1) % 2 + 1) + '.jpg)'; // 更換翻頁后的紙背景 rightOtherPage.style.backgroundImage = 'url(images/' + ((index + 1) % 2 + 1) + '.jpg)'; flag = false; }, 500); }; </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js將table的每個td的內(nèi)容自動賦值給其title屬性的方法
下面小編就為大家?guī)硪黄猨s將table的每個td的內(nèi)容自動賦值給其title屬性的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10

jquery 實現(xiàn)輸入郵箱時自動補全下拉提示功能
大家在做Web項目,都會有注冊登錄模塊,如果是郵箱注冊,想要在輸入@后觸發(fā)下拉框顯示各個郵箱的功能。下面介紹一款jQuery實現(xiàn)輸入郵箱的時候,可自動補全郵箱地址,也可稱為是“輸入提示”的功能,比如輸入aaa時,自動變成aaa@163.com,有效提升網(wǎng)頁的人性化體驗
2015-10-10