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

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

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

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

        使用 CSS 的 :hover 属性来添加悬停效果。

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

示例代码：

HTML

<img src="图像引用网址400x400.jpg"/>

<img src="图像引用网址"/>

<img src="图像引用网址400x400.jpg"/>

<img src="图像引用网址"/>

CSS

img {

    height: 200px;

    width: 200px;

    margin: 10px;

}img:hover{

    height: 400px;

    width: 400px;

}

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

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

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

示例代码：

img:hover{

    transform:scale(2);

}

三：点击图片使用 HTML 和 JavaScript 放大图片

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

addEventListner 方法有两个参数：

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

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

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

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

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

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"/>

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 方法。

代码007普通

打赏 收藏 海报 链接