首页 前端知识 HTML 网页中 自定义图像单击或鼠标悬停时放大

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

2024-06-04 10:06:26 前端知识 前端哥 945 120 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10765.html
标签
评论
发布的文章

js-jquery页面跳转集合

2024-06-08 22:06:13

echarts柱状图数据过多

2024-06-08 22:06:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!