新网站网页收录,wordpress时间调用,网站联系方式要素,吉安网络科技有限公司HTML 网页中 自定义图像单击或鼠标悬停时放大 一#xff1a;在悬停时更改 HTML 图像的大小 例子中#xff0c;使用 CSS 样式#xff1b;来设置每个图像元素的高宽 200px#xff1b;以及 10px 边距#xff0c;以便在图像周围留出空间。 使用 CSS 的 :hover 属性来添加悬停效…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 height200px width200px/
img src图像引用网址 height200px width200px/
img src引用图像地.jpg height200px width200px/
img src图像引用网址 height200px width200px/
img src图像引用网址 height200px width200px/
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.margin40px});} 在上面的代码中用户可以观察到当点击图片时图片会放大而其他图片会调整到原来的大小。 此外当将鼠标悬停在图像上时也没有任何效果。 介绍了三种不同的放大图像的方法。前两个方法使用 CSS :hover 属性第三个使用 JavaScript addEventListener 方法。
