html 格式中在图像上单击或悬停时进行放大-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > > web前端 > html >

vue react javascript angular css html

html 格式中在图像上单击或悬停时进行放大

作者：迹忆客最近更新：2023/03/27 浏览次数：

本文将教大家在用户单击或悬停在特定图像上时放大 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'
    });
}