在网页中放一个图片,当鼠标在图片上移动时图片在另一个div容器中放大显示并随鼠标移动
时间: 2023-06-24 07:05:36 浏览: 146
可以通过JavaScript和CSS来实现这个效果。下面是一个简单的实现方式:
HTML代码:
```html
<div class="image-container">
<img src="your-image-url" alt="your-image">
</div>
<div class="enlarged-image-container"></div>
```
CSS样式:
```css
.image-container {
position: relative;
}
.enlarged-image-container {
position: absolute;
display: none;
z-index: 9999;
}
.enlarged-image-container img {
max-width: 300px;
max-height: 300px;
border: 1px solid #ccc;
border-radius: 5px;
}
```
JavaScript代码:
```javascript
const imageContainer = document.querySelector(".image-container");
const enlargedImageContainer = document.querySelector(".enlarged-image-container");
imageContainer.addEventListener("mousemove", (event) => {
// 获取鼠标相对于图片容器的位置
const x = event.offsetX;
const y = event.offsetY;
// 获取图片元素
const image = imageContainer.querySelector("img");
// 计算放大图片的位置
const enlargedImageX = x - 150;
const enlargedImageY = y - 150;
// 设置放大图片的位置
enlargedImageContainer.style.left = `${enlargedImageX}px`;
enlargedImageContainer.style.top = `${enlargedImageY}px`;
// 设置放大图片的内容
enlargedImageContainer.innerHTML = `<img src="${image.src}" alt="${image.alt}">`;
// 显示放大图片容器
enlargedImageContainer.style.display = "block";
});
imageContainer.addEventListener("mouseleave", () => {
// 隐藏放大图片容器
enlargedImageContainer.style.display = "none";
});
```
上面的代码中,我们首先获取图片容器和放大图片容器的元素,并且给图片容器添加了鼠标移动和鼠标离开的事件监听器。
当鼠标在图片容器内移动时,我们计算出鼠标相对于图片容器的位置,并且根据这个位置计算出放大图片的位置。
然后,我们设置放大图片容器的位置和内容,并且显示放大图片容器。
当鼠标离开图片容器时,我们隐藏放大图片容器。