在网页上放一个图片,鼠标移动到图片上后图片在另一个div容器中显示
时间: 2024-05-13 16:18:53 浏览: 7
你可以使用JavaScript和CSS实现这个效果。
首先需要在HTML中添加两个div,一个用来显示原始图片,一个用来显示鼠标移动时的图片:
```html
<div id="image-container">
<img src="your-image-source.jpg" id="original-image">
</div>
<div id="hover-image-container">
<img src="" id="hover-image">
</div>
```
然后在CSS中设置这两个div的样式:
```css
#image-container {
position: relative;
width: 500px;
height: 500px;
}
#original-image {
width: 100%;
height: 100%;
object-fit: cover;
}
#hover-image-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
#hover-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 80%;
max-height: 80%;
object-fit: contain;
}
```
其中,`#image-container`是原始图片的容器,设置了相对定位和宽高。`#original-image`是原始图片,设置了宽高为100%并使用了`object-fit: cover`来保持图片比例。
`#hover-image-container`是鼠标移动时图片的容器,设置了绝对定位和宽高为100%,并使用了`display: none`来隐藏初始状态下的图片。`#hover-image`是鼠标移动时显示的图片,设置了绝对定位和最大宽高,使用`object-fit: contain`来保持图片比例,并使用`transform: translate(-50%, -50%)`来将图片居中显示。
最后,使用JavaScript来监听鼠标移动事件,并将鼠标所在位置的图片显示在`#hover-image-container`中:
```javascript
const originalImage = document.getElementById('original-image');
const hoverImage = document.getElementById('hover-image');
const hoverImageContainer = document.getElementById('hover-image-container');
originalImage.addEventListener('mousemove', function(e) {
const x = e.offsetX / this.offsetWidth;
const y = e.offsetY / this.offsetHeight;
hoverImage.src = this.src;
hoverImage.style.top = `${y * 100}%`;
hoverImage.style.left = `${x * 100}%`;
hoverImageContainer.style.display = 'block';
});
originalImage.addEventListener('mouseleave', function() {
hoverImageContainer.style.display = 'none';
});
```
其中,`originalImage`是原始图片的DOM元素,`hoverImage`是鼠标移动时显示的图片的DOM元素,`hoverImageContainer`是鼠标移动时图片的容器的DOM元素。
使用`addEventListener`来监听`mousemove`事件,计算鼠标相对于图片左上角的位置,并将原始图片的`src`属性赋值给`hoverImage`,同时设置`hoverImage`的`top`和`left`属性来将图片放置到鼠标所在位置。最后设置`hoverImageContainer`的`display`属性为`block`,显示鼠标移动时的图片。
同样,也可以使用`addEventListener`来监听`mouseleave`事件,当鼠标离开原始图片时,将`hoverImageContainer`的`display`属性设置为`none`,隐藏鼠标移动时的图片。