js翻书效果
时间: 2023-07-01 19:28:43 浏览: 54
实现JS翻书效果的方式有很多种,以下是其中一种常见的实现方式:
1. HTML结构
```
<div class="book">
<div class="page">
<img src="page1.jpg">
</div>
<div class="page">
<img src="page2.jpg">
</div>
<div class="page">
<img src="page3.jpg">
</div>
...
</div>
```
2. CSS样式
```
.book {
width: 400px;
height: 300px;
position: relative;
perspective: 1000px;
}
.page {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: transform 1s;
}
.page:nth-child(even) {
transform-origin: right center;
}
.page:nth-child(odd) {
transform-origin: left center;
}
.page.active {
z-index: 1;
transform: rotateY(0);
}
.page.inactive {
z-index: 0;
transform: rotateY(180deg);
}
```
3. JS代码
```
var pages = document.querySelectorAll('.page');
pages.forEach(function(page) {
page.addEventListener('click', function() {
pages.forEach(function(page) {
page.classList.remove('active');
page.classList.add('inactive');
});
this.classList.remove('inactive');
this.classList.add('active');
});
});
```
这段代码实现了当点击某一页时,将该页翻到正面,其余页翻到背面的效果。具体实现过程请参考代码注释。