你能否用HTML+CSS+JS做一个好看的能翻页的数书,图片和文字由我来写
时间: 2024-05-02 17:20:16 浏览: 11
当然可以,以下是一个简单的例子:
HTML:
```html
<div class="book">
<div class="page">
<img src="page1.jpg">
<p>第一页的文本内容</p>
</div>
<div class="page">
<img src="page2.jpg">
<p>第二页的文本内容</p>
</div>
<div class="page">
<img src="page3.jpg">
<p>第三页的文本内容</p>
</div>
<div class="page">
<img src="page4.jpg">
<p>第四页的文本内容</p>
</div>
</div>
<button class="prev">上一页</button>
<button class="next">下一页</button>
```
CSS:
```css
.book {
margin: 50px auto;
width: 500px;
height: 400px;
position: relative;
perspective: 1000px;
}
.page {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
backface-visibility: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.page img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.page p {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
font-size: 20px;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(0,0,0,0.5);
color: white;
font-size: 20px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
```
JS:
```js
var book = document.querySelector('.book');
var pages = document.querySelectorAll('.page');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var currentPage = 0;
function turnPage() {
pages[currentPage].classList.remove('active');
currentPage += this.getAttribute('data-turn') === 'next' ? 1 : -1;
if (currentPage < 0) {
currentPage = 0;
} else if (currentPage >= pages.length) {
currentPage = pages.length - 1;
}
pages[currentPage].classList.add('active');
}
prev.addEventListener('click', turnPage);
next.addEventListener('click', turnPage);
pages[currentPage].classList.add('active');
```
这是一个简单的数书翻页效果,通过JS实现翻页功能,CSS实现3D效果,HTML结构简单清晰。你可以根据自己的需求对样式和JS功能进行修改和扩展。