HTML 网页中自定义图像单击或鼠标悬停时放大

HTML 网页中自定义 图像 单击或鼠标悬停时放大

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

例子中，使用 CSS 样式；来设置每个图像元素的高宽 200px；以及 10px 边距，以便在图像周围留出空间。

在 CSS 的 img:hover 块中，为图像元素设置 400px 的高度和宽度，鼠标悬停在图像上，即可缩放 2 倍。

HTML

&lt;img src="图像引用网址400x400.jpg"/&gt;

&lt;img src="图像引用网址"/&gt;

&lt;img src="图像引用网址400x400.jpg"/&gt;

&lt;img src="图像引用网址"/&gt;

CSS

img {

    height: 200px;

    width: 200px;

    margin: 10px;

}img:hover{

    height: 400px;

    width: 400px;

}

二：使用 transform CSS 属性来放大 HTML 图像。

transform 属性允许转换任何 HTML 元素，图像就是其中之一（意味着可以对图像进行缩放、旋转、平移等操作。

在下面的示例代码中，使用 2 作为缩放值，在 i mg:h ov e r 块中添加了 transform: scale(2) CSS 样式。表示：鼠标悬停在特定图像上时，将图像高度和宽度乘以放大2倍。

示例代码：

img:hover{

    transform:scale(2);

}

三：点击 图片 使用 HTML 和 Jav aScri pt 放大图片

在 Jav aScri pt 中，通过存储在 image s 变量中的标签名称，访问所有 i mg 元素；之后，遍历图像数组并将 addEv entLi stener 方法添加到每个图像。

addEventListner 方法有两个参数：

一种事件类型；另一个是回调函数。

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

可以使用 element.style 属性更改 img 元素的样式。在这里，使用 Jav aSc ript 中的 image[i].style.tr ansfrom 属性将 CSS transform应用于图像元素。

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

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

HTML

<img src="引用图像地址400x400.jpg" height="200px" width="200px"/>
<img src="图像引用网址" height="200px" width="200px"/>
<img src="引用图像地.jpg" height="200px" width="200px"/>
<img src="图像引用网址" height="200px" width="200px"/>
<img src="图像引用网址" height="200px" width="200px"/>

Ja vaSc r ipt

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'

    });

}