当鼠标移动到任一张图片,该图片方向转为正向,且置于最上层。
时间: 2024-02-05 11:19:38 浏览: 8
这是一个比较常见的交互效果,可以通过以下步骤实现:
1. 给每张图片添加一个鼠标移动事件监听器,可以使用 JavaScript 的 addEventListener 方法来实现。
2. 在鼠标移动事件的处理函数中,将当前鼠标所在的图片方向转为正向,可以使用 CSS 的 transform 属性来实现。
3. 将当前鼠标所在的图片置于最上层,可以使用 CSS 的 z-index 属性来实现。
下面是一个简单的示例代码,用来实现该效果:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.image {
position: absolute;
width: 100px;
height: 100px;
background-size: cover;
transition: transform 0.3s ease-in-out, z-index 0.3s ease-in-out;
}
.image:hover {
transform: scale(1.2);
z-index: 1;
}
#image1 {
background-image: url("image1.jpg");
top: 0;
left: 0;
}
#image2 {
background-image: url("image2.jpg");
top: 0;
left: 120px;
}
#image3 {
background-image: url("image3.jpg");
top: 0;
left: 240px;
}
</style>
</head>
<body>
<div id="image1" class="image"></div>
<div id="image2" class="image"></div>
<div id="image3" class="image"></div>
<script>
const images = document.querySelectorAll('.image');
images.forEach(image => {
image.addEventListener('mousemove', e => {
image.style.transformOrigin = `${e.offsetX}px ${e.offsetY}px`;
image.style.transform = 'scale(1.2)';
image.style.zIndex = '1';
});
image.addEventListener('mouseleave', e => {
image.style.transform = 'scale(1)';
image.style.zIndex = '0';
});
});
</script>
</body>
</html>
```
在上面的示例中,我们使用了 CSS 的 transform 属性来实现图片的缩放效果,使用了 z-index 属性来实现图片的层级效果。同时,我们在 JavaScript 中监听了鼠标移动事件,根据当前鼠标所在位置来更新图片的 transform 和 z-index 属性,从而实现了图片方向转为正向,并置于最上层的效果。