HTML電子書翻頁效果是網站開發中常見的效果之一，通過這種效果可以讓用戶在瀏覽電子書時更加方便和自然。下面將為大家介紹一個簡單的HTML電子書翻頁效果代碼，并附上效果演示。
首先，我們需要準備一個HTML文件，其中包含了一些文本內容和樣式。代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>HTML電子書翻頁效果演示</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
padding: 0;
margin: 0;
}
#book {
position: relative;
width: 80%;
max-width: 800px;
margin: 0 auto;
padding: 30px;
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transition: transform 0.5s ease-in-out;
}
</style>
</head>
<body>
<div id="book">
<div class="page">
<p>第一頁內容</p>
</div>
<div class="page">
<p>第二頁內容</p>
</div>
</div>
</body>
</html><script>
var pages = document.querySelectorAll('.page');
var currentPage = 0;
function nextPage() {
if (currentPage< pages.length - 1) {
pages[currentPage].style.transform = 'rotateY(180deg)';
currentPage++;
pages[currentPage].style.transform = 'rotateY(0deg)';
}
}
function prevPage() {
if (currentPage >0) {
pages[currentPage].style.transform = 'rotateY(-180deg)';
currentPage--;
pages[currentPage].style.transform = 'rotateY(0deg)';
}
}
document.addEventListener('keydown', function(event) {
if (event.keyCode === 37) {
prevPage();
} else if (event.keyCode === 39) {
nextPage();
}
});
</script>下一篇vue是否支持xp