JS折页特效。鼠标触碰页面右上角收缩的折页图片,徐徐平滑地展开全部折页;离开右上角折页图片,徐徐平滑地收缩图片
时间: 2023-09-23 20:08:57 浏览: 34
实现这个效果,你可以使用jQuery库和CSS3动画。具体步骤如下:
1. 在HTML文件中添加一个div元素,作为折页的容器,并在其中添加折页内容。
2. 在CSS文件中设置该div元素的初始状态为收缩状态,并设置折页图片的位置为页面右上角。
3. 使用jQuery库监听折页图片的鼠标触摸事件,当鼠标触摸到折页图片时,使用CSS3动画将折页容器展开;当鼠标离开折页图片时,使用CSS3动画将折页容器收缩。
下面是实现代码:
HTML文件中添加折页容器:
```
<div id="fold-container">
<div id="fold-content">
// 折页内容
</div>
</div>
```
CSS文件中设置折页容器和折页图片的样式:
```
#fold-container {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100%;
overflow: hidden;
transition: width 0.5s ease-in-out;
}
#fold-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fold-icon {
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
cursor: pointer;
background-image: url(折页图片地址);
background-size: cover;
transition: transform 0.5s ease-in-out;
}
```
jQuery代码监听鼠标触摸事件,展开或收缩折页容器:
```
$(".fold-icon").hover(function() {
$("#fold-container").css("width", "50%");
$(this).css("transform", "rotate(180deg)");
}, function() {
$("#fold-container").css("width", "0");
$(this).css("transform", "rotate(0deg)");
});
```
这样,当鼠标触摸到折页图片时,折页容器就会展开;当鼠标离开折页图片时,折页容器就会收缩,同时折页图片也会旋转180度。