折页特效。鼠标触碰页面右上角收缩的折页图片,展开折页图片;鼠标离开,收缩图片。
时间: 2023-09-30 19:04:10 浏览: 45
要实现这个折页特效,可以使用 jQuery 或者纯 JavaScript 来操作 DOM。
以下是一个使用 jQuery 的实现:
HTML 代码:
```html
<div id="folded-page"></div>
```
CSS 代码:
```css
#folded-page {
width: 100px;
height: 100px;
background-image: url('folded-page.png');
background-size: cover;
position: fixed;
top: 0;
right: 0;
cursor: pointer;
transition: all 0.3s ease;
}
```
JavaScript 代码:
```javascript
$(function() {
var foldedPage = $("#folded-page");
// 当鼠标移入时展开折页图片
foldedPage.mouseenter(function() {
foldedPage.css({
width: "300px",
height: "300px",
backgroundSize: "cover",
backgroundImage: "url('unfolded-page.png')"
});
});
// 当鼠标移出时收缩折页图片
foldedPage.mouseleave(function() {
foldedPage.css({
width: "100px",
height: "100px",
backgroundSize: "cover",
backgroundImage: "url('folded-page.png')"
});
});
});
```
上面的代码中,我们首先定义了一个 `id` 为 `folded-page` 的 `div` 元素,并在 CSS 中设置了它的样式。然后,在 JavaScript 中使用 jQuery 的 `mouseenter()` 和 `mouseleave()` 函数来绑定鼠标移入和移出事件,并分别在事件处理函数中更改折页图片的样式。
你需要将代码中的图片路径替换为你自己的图片路径,或者将图片放到与 HTML 文件相同的目录下。