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