迹忆客 专注技术分享

本文将教大家在用户单击或悬停在特定图像上时放大 HTML 图像。

作为图片库的用户，我们会看到用户界面中有多个图像，当您将鼠标悬停在单个图像上时，它会放大。 我们将在本文中学习通过悬停或单击来放大图像的不同方法。

在悬停时更改 HTML 图像的大小

当用户将鼠标悬停在特定图像上时，我们可以使用 HTML 和 CSS 放大该图像。 在下面的示例中，我们创建了五个具有不同 src 属性值的 img 元素。

在这里，用户可以看到所有图像都将显示在同一行中。

我们还使用 CSS 样式来设置每个图像元素的高度和宽度。 我们为每个元素分配了 200px 的高度和宽度。

我们还为每个 img 元素设置了 10px 的边距，以便在图像周围留出空间。

我们使用 CSS 的 :hover 属性来添加悬停效果。 在 CSS 的 img:hover 块中，我们为图像元素设置了 400px 的高度和宽度，这意味着只要用户将鼠标悬停在图像上，图像就会缩放 2 倍。

示例代码：

HTML

<img src="https://pbs.test.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/jiyik/logo.png"/>
<img src="https://pbs.test.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/jiyik/logo.png"/>
<img src="/img/jiyik/logo.png"/>

CSS

img {
    height: 200px;
    width: 200px;
    margin: 10px;
}
img:hover{
    height: 400px;
    width: 400px;
}

注意 , 本文代码中的图片地址都不是真实存在的，大家看效果的话可以自己选择相应的图片地址。

上面代码的效果是，用户可以看到当我们将鼠标悬停在任何图像上时，该图像的大小会增加。

此外，我们可以使用 transform CSS 属性来放大 HTML 图像。 transform 属性允许我们转换任何 HTML 元素，图像就是其中之一。

这意味着我们可以对图像进行缩放、旋转、平移等操作。 在这里，我们将对图像应用缩放以放大它。

在下面的示例代码中，我们在 img:hover 块中添加了 transform: scale(2) CSS 样式。 当用户将鼠标悬停在特定图像上时，它会将图像的高度和宽度乘以 2。

transform: scale(multifactor) 采用称为 multifactor 的单个参数。 因此，它通过多因素增加了元素的大小。

在我们的例子中，我们使用 2 作为多因子的值，因此它将图像放大 2 倍。

示例代码：

img:hover{
    transform:scale(2);
}

当用户点击图片时使用 HTML 和 JavaScript 放大图片

当用户点击图片时，我们可以使用 HTML 和 JavaScript 来放大图片。 在此示例中，我们创建了五个 HTML 图像并将高度和宽度作为属性分配给每个 img 元素。

在 JavaScript 中，我们通过存储在 images 变量中的标签名称访问所有 img 元素。 之后，我们遍历图像数组并将 addEventListener 方法添加到每个图像。

addEventListner 方法有两个参数；

• 第一个参数是一种事件类型
• 另一个是回调函数。

在这里，我们使用了点击事件作为第一个参数，因此每当用户点击任何图像元素时都会执行回调函数。

我们可以使用 element.style 属性更改 img 元素的样式。 在这里，我们使用 JavaScript 中的 image[i].style.transfrom 属性将 CSS transform 属性应用于图像元素。

在回调函数中，我们遍历图像数组以调整除单击图像之外的其他图像的大小。 接下来，我们将点击元素的变换样式更改为 scale(1.3)。

此外，我们还为单击的元素添加了一些边距，以便使用 JavaScript 获得更好的界面。

示例代码：

HTML

<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>

JavaScript

var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
    images[i].addEventListener("click", function () {
        for (var j = 0; j < images.length; j++) {
            if (i != j) {
                images[j].style.transform = "scale(1)";
            }
          }
        this.style.transform = "scale(1.3)";
        this.style.margin='40px'
    });
}

在上面的代码中，用户可以观察到当我们点击图片时，图片会放大，而其他图片会调整到原来的大小。 此外，当我们将鼠标悬停在图像上时也没有任何效果。

我们在本文中学习了三种不同的放大图像的方法。 前两个方法使用 CSS :hover 属性，第三个使用 JavaScript addEventListener 方法。