鼠标移到图片上显示变大效果通常被称为“悬停放大效果”,可以通过CSS和JavaScript来实现。下面是实现该效果的完整攻略:
步骤一:准备HTML结构
首先需要在HTML中准备好要显示的图片,并为它们添加data-zoom
属性,用于存放悬停后显示的图片。
示例HTML代码:
<div class="image-container">
<img src="image1.jpg" alt="Image 1" data-zoom="image1-zoom.jpg">
<img src="image2.jpg" alt="Image 2" data-zoom="image2-zoom.jpg">
<img src="image3.jpg" alt="Image 3" data-zoom="image3-zoom.jpg">
</div>
步骤二:添加CSS样式
为了实现悬停放大效果,我们需要用CSS将图片的位置定位,并将它们的尺寸变小,这样在悬停时才能恢复原来的尺寸。
示例CSS代码:
.image-container {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
width: 50%; /*设置图片缩放后的宽度*/
transition: all 0.5s ease;
}
img:hover {
width: 100%; /*设置图片缩放前的宽度*/
z-index: 999; /* 设置图片层数,让其覆盖其他元素*/
box-shadow: 0 0 10px rgba(0,0,0,0.5); /*添加一个黑色半透明遮罩,让图片看起来更突出*/
}
步骤三:添加JavaScript代码
为了能够在悬停时显示放大图片,我们需要将悬停事件加入进来。在每个img
标签上监听mouseover
事件,以获取data-zoom
属性的值,然后在之前创建的<div>
元素中显示相应的图片。
示例JavaScript代码:
const zoomContainer = document.createElement("div");
zoomContainer.classList.add("zoom-container");
document.body.appendChild(zoomContainer);
document.querySelectorAll("img").forEach((img) => {
img.addEventListener("mouseover", () => {
const imgSrc = img.getAttribute("data-zoom");
const zoomImg = new Image();
zoomImg.src = imgSrc;
zoomContainer.innerHTML = "";
zoomContainer.appendChild(zoomImg);
});
});
示例说明
示例一:使用本地图片
- 准备两张图片文件,分别命名为
apple.jpg
和apple-zoom.jpg
,并放置到工程目录下的images
目录中。 - 写一段 HTML 代码,用 img 标签引用这两张图片,并加上 data-zoom 属性,存储需要悬停后显示的图片的 URL。
<div class="image-container">
<img src="./images/apple.jpg" alt="Apple" data-zoom="./images/apple-zoom.jpg">
</div>
- 加载上述代码所需的 CSS 和 JavaScript 文件,并在相应位置添加上述代码,便可以显示悬停后放大效果。
示例二:使用CDN中的图片
- 在网上选一张图片,并在不需要身份验证的 CDN 上将其放到一个共有的目录下,并获取该图片的CDN地址链接,例如:
https://cdn.example.com/images/banana.jpg
- 在 HTML 中使用上述链接引用图片,并设置
data-zoom
属性以存储需要悬停后显示的图片的 CDN 地址链接
<div class="image-container">
<img src="https://cdn.example.com/images/banana.jpg" alt="Banana" data-zoom="https://cdn.example.com/images/banana-zoom.jpg">
</div>
- 加载上述代码所需的 CSS 和 JavaScript 文件,并在相应位置添加上述代码,便可以显示悬停后放大效果。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:鼠标移到图片上变大显示而不是放大镜效果 - Python技术站