迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > HTML >

HTML 格式中在图像上单击或悬停时进行放大

作者:迹忆客 最近更新:2023/03/27 浏览次数:

本文将教大家在用户单击或悬停在特定图像上时放大 HTML 图像。

作为图片库的用户,我们会看到用户界面中有多个图像,当您将鼠标悬停在单个图像上时,它会放大。 我们将在本文中学习通过悬停或单击来放大图像的不同方法。


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

当用户将鼠标悬停在特定图像上时,我们可以使用 HTMLCSS 放大该图像。 在下面的示例中,我们创建了五个具有不同 src 属性值的 img 元素。

在这里,用户可以看到所有图像都将显示在同一行中。

我们还使用 CSS 样式来设置每个图像元素的高度和宽度。 我们为每个元素分配了 200px 的高度和宽度。

我们还为每个 img 元素设置了 10px 的边距,以便在图像周围留出空间。

我们使用 CSS 的 :hover 属性来添加悬停效果。 在 CSS 的 img:hover 块中,我们为图像元素设置了 400px 的高度和宽度,这意味着只要用户将鼠标悬停在图像上,图像就会缩放 2 倍。

示例代码:

HTML

<img src="https://pbs.test.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/jiyik/logo.png"/>
<img src="https://pbs.test.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/jiyik/logo.png"/>
<img src="/img/jiyik/logo.png"/>

CSS

img {
    height: 200px;
    width: 200px;
    margin: 10px;
}
img:hover{
    height: 400px;
    width: 400px;
}

注意 , 本文代码中的图片地址都不是真实存在的,大家看效果的话可以自己选择相应的图片地址。

上面代码的效果是,用户可以看到当我们将鼠标悬停在任何图像上时,该图像的大小会增加。

此外,我们可以使用 transform CSS 属性来放大 HTML 图像。 transform 属性允许我们转换任何 HTML 元素,图像就是其中之一。

这意味着我们可以对图像进行缩放、旋转、平移等操作。 在这里,我们将对图像应用缩放以放大它。

在下面的示例代码中,我们在 img:hover 块中添加了 transform: scale(2) CSS 样式。 当用户将鼠标悬停在特定图像上时,它会将图像的高度和宽度乘以 2。

transform: scale(multifactor) 采用称为 multifactor 的单个参数。 因此,它通过多因素增加了元素的大小。

在我们的例子中,我们使用 2 作为多因子的值,因此它将图像放大 2 倍。

示例代码:

img:hover{
    transform:scale(2);
}

当用户点击图片时使用 HTML 和 JavaScript 放大图片

当用户点击图片时,我们可以使用 HTML 和 JavaScript 来放大图片。 在此示例中,我们创建了五个 HTML 图像并将高度和宽度作为属性分配给每个 img 元素。

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

addEventListner 方法有两个参数;

  • 第一个参数是一种事件类型
  • 另一个是回调函数。

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

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

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

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

示例代码:

HTML

<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" 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 方法。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

HTML 中的 role 属性

发布时间:2023/05/06 浏览次数:124 分类:HTML

本篇文章介绍 HTML role属性。HTML中 role 属性介绍,role 属性定义描述语义的 HTML 元素的角色。

在 HTML 中打印时分页

发布时间:2023/05/06 浏览次数:188 分类:HTML

本篇文章介绍如何在打印 HTML 页面或内容时强制分页。将 page-break-after 属性设置为 always Inside @media print to Page Break in HTML

在 HTML 中显示基于 Cookie 的图像

发布时间:2023/05/06 浏览次数:154 分类:HTML

本文介绍如何根据 HTML 中的 cookies 显示图像。根据 HTML 中设置的 Cookies 显示图像。问题陈述是我们需要根据网页传递的cookie来显示特定的图像。

在 HTML 中创建下载链接

发布时间:2023/05/06 浏览次数:140 分类:HTML

本文介绍如何在 HTML 中创建下载链接。使用 download 属性在 HTML 中创建下载链接.。我们可以使用 HTML 锚元素内的下载属性来创建下载链接。

HTML 中的 ::before 选择器

发布时间:2023/05/06 浏览次数:70 分类:HTML

本教程介绍 CSS ::before 伪元素。CSS ::before 伪元素。 ::before 选择器是一个 CSS 伪元素,我们可以使用它在一个或多个选定元素之前插入内容。 它默认是内联的。

在 HTML 中创建一个可滚动的 Div

发布时间:2023/05/06 浏览次数:54 分类:HTML

本篇文章介绍如何使 HTML div 可滚动。本文将介绍在 HTML 中使 div 可滚动的方法。 我们将探索垂直和水平滚动,并通过示例查看它们的实现。

HTML 显示箭头的代码

发布时间:2023/05/06 浏览次数:153 分类:HTML

一篇关于用于显示箭头的 Unicode 字符实体的紧凑文章。本文讨论使用 Unicode 字符实体在我们的 HTML 页面上显示不同的字符。 HTML 中使用了许多实体,但我们将重点学习表示上、下、左、右的三角

在 HTML 中启用和禁用复选框

发布时间:2023/05/06 浏览次数:149 分类:HTML

本篇文章介绍如何启用和禁用 HTML 中的复选框。HTML 中的复选框 复选框是一个交互式框,可以切换以表示肯定或否定。 它广泛用于表单和对话框。

HTML 中的只读复选框

发布时间:2023/05/06 浏览次数:198 分类:HTML

本篇文章介绍了如何在 HTML 中制作只读复选框。本文是关于如何使 HTML 复选框控件成为只读组件的快速破解。 但是,首先,让我们简要介绍一下复选框控件。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便