js折页特效。 (1)鼠标触碰页面右上角收缩的折页图片,徐徐平滑地展开全部折页图片。(2)鼠标离开页面右上角折页图片,徐徐平滑地收缩图片。
时间: 2024-03-13 10:46:10 浏览: 23
可以使用CSS3动画和JavaScript实现这个折页特效。
首先,HTML代码中需要包含折页图片的容器和展开/收缩的按钮。例如:
```html
<div class="page">
<!-- 折页图片 -->
<img src="page1.jpg">
<img src="page2.jpg">
<img src="page3.jpg">
<!-- 展开/收缩按钮 -->
<div class="fold"></div>
</div>
```
接着,使用CSS3动画定义展开和收缩的过渡效果。例如:
```css
/* 折页容器 */
.page {
position: fixed;
right: 0;
top: 0;
width: 200px;
height: 200px;
overflow: hidden;
transition: all 0.5s ease;
}
/* 折页图片 */
.page img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
}
/* 展开/收缩按钮 */
.page .fold {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
background: url(fold.png) no-repeat center center;
cursor: pointer;
transition: all 0.5s ease;
}
/* 折页展开状态 */
.page.open {
width: 400px;
}
.page.open img {
opacity: 1;
}
.page.open .fold {
transform: rotate(180deg) translate(-10px, -10px);
}
```
最后,使用JavaScript监听鼠标事件,控制折页容器的展开和收缩。例如:
```javascript
var page = document.querySelector('.page');
var fold = document.querySelector('.fold');
var isOpen = false;
fold.addEventListener('mouseenter', function() {
page.classList.add('open');
isOpen = true;
});
page.addEventListener('mouseleave', function() {
if (isOpen) {
page.classList.remove('open');
isOpen = false;
}
});
```
这样,当鼠标触碰展开/收缩按钮时,折页容器会平滑展开;当鼠标离开折页容器时,折页容器会徐徐平滑地收缩。