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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/52134.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

EFCore常见用法

EFCore官方文档置顶&#xff0c;看这个就行。下面的内容只是总结&#xff0c;算是备忘录。 一、创建和删除 //1、创建数据库和表 db.Database.EnsureCreated();//将创建数据库&#xff08;如果不存在&#xff09;并初始化数据库架构。 如果存在任何表 (包括另一 DbContext 类)…

概念解析 | 电磁计算的新篇章:智能电磁计算

注1&#xff1a;本文系“概念解析”系列之一&#xff0c;致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是&#xff1a;智能电磁计算。 电磁计算的新篇章&#xff1a;智能电磁计算 随着人工智能的飞速发展&#xff0c;我们正处在一个信息爆炸的时代。各个领域&a…

图为科技-边缘计算在智慧医疗领域的作用

边缘计算在智慧医疗领域的作用 随着科技的进步&#xff0c;智慧医疗已成为医疗行业的重要发展趋势。边缘计算作为新兴技术&#xff0c;在智慧医疗领域发挥着越来越重要的作用。本文将介绍边缘计算在智慧医疗领域的应用及其优势&#xff0c;并探讨未来发展方向。 一、边缘计算…

matlab使用教程(19)—曲线拟合与一元方程求根

1.多项式曲线拟合 此示例说明如何使用 polyfit 函数将多项式曲线与一组数据点拟合。您可以按照以下语法&#xff0c;使用 polyfit 求出以最小二乘方式与一组数据拟合的多项式的系数 p polyfit(x,y,n), 其中&#xff1a; • x 和 y 是包含数据点的 x 和 y 坐标的向量 …

laravel中Mail发送邮件失败,但是没有错误信息,该如何调试?

在Laravel中&#xff0c;当使用Mail类发送邮件失败但没有错误信息显示时&#xff0c;可以按照以下步骤进行调试&#xff1a; 检查日志文件&#xff1a; Laravel会记录各种应用程序活动和错误信息。查看应用程序的日志文件&#xff0c;通常位于storage/logs目录下&#xff0c;寻…

Git笔记--分支常用命令

目录 1--git branch -v 2--git branch 3--git checkout 4--git merge 1--git branch -v git branch -v git branch -v 用于查看分支版本&#xff1b; 2--git branch git branch xxxxx # xxxxx表示分支名 git branch 用于创建分支&#xff1b; 3--git checkout git check…

搭建一个spring框架(基于spring.formwork的@Configuration和@Bean注解搭建)

使用 Spring Framework的注解方式来搭建 Spring 框架&#xff0c;以下是基本步骤&#xff1a; **步骤 1&#xff1a;准备开发环境** 确保你的开发环境中有 Java 开发工具&#xff08;如 JDK&#xff09;和一个集成开发环境&#xff08;IDE&#xff09;。 **步骤 2&#xff1…

uniapp 安卓平台签名证书(.keystore)生成

安装JRE环境 下载jre安装包&#xff1a;https://www.oracle.com/java/technologies/downloads/#java8安装jre安装包时&#xff0c;记录安装目录(例:C:\Program Files\Java\jdk-20)打开命令行&#xff08;cmd&#xff09;&#xff0c;将JRE安装路径添加到系统环境变量 d: se…

PostgreSQL基本操作总结

安装按PostgreSQL数据库后&#xff0c;会默认创建用户postgres和数据库postgres&#xff0c;这个用户是超级用户&#xff0c;权限最高&#xff0c;可以创建其他用户和权限&#xff0c;在实际开发过程中&#xff0c;会新创建用户和业务数据库&#xff0c;本文主要介绍用户权限和…

Redis Pub/Sub 指南

Redis 不仅仅是一个数据库&#xff0c;还可以作为支持发布和订阅&#xff08;Pub/Sub&#xff09;操作的消息代理。本文将使用 Navicat for Redis 简要概述 Redis 的 Pub/Sub 功能。 关于发布或订阅消息范式 Pub/Sub 是一种模式&#xff0c;发送者&#xff08;广播者&#xf…

分类预测 | MATLAB实现SCNGO-CNN-LSTM-Attention数据分类预测

分类预测 | MATLAB实现SCNGO-CNN-LSTM-Attention数据分类预测 目录 分类预测 | MATLAB实现SCNGO-CNN-LSTM-Attention数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.SCNGO-CNN-LSTM-Attention数据分类预测程序&#xff0c;改进算法&#xff0c;融合正余弦和…

最新ChatGPT网站程序源码+AI系统+详细图文搭建教程/支持GPT4.0/AI绘画/H5端/Prompt知识库

一、前言 SparkAi系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。 那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&#xff01…

spark sql 数据倾斜--join 同时开窗去重的问题优化

spark sql 数据倾斜–join 同时开窗去重的问题优化 文章目录 spark sql 数据倾斜--join 同时开窗去重的问题优化结论1. 原方案&#xff1a;join步骤时&#xff0c;同时开窗去重数据倾斜 2. 优化2.1 参数调优2.2 SQL优化 背景&#xff1a; 需求&#xff1a;在一张查询日志表中&a…

【数据库】Mysql中的索引与失效场景

1、前言 MySQL中数据表设计合理的索引对提高性能很有帮助。使用索引可以快速地定位表中的某条记录&#xff0c;从而提高数据库查询的速度&#xff0c;提高数据库的性能。 大多数情况下都&#xff08;默认&#xff09;采用B 树来构建索引。只是空间列类型的索引使R- 树&#xf…

集合相关知识

1.为什么使用集合 如果让你统计公司每个月的销售额&#xff0c;你会用数组吗&#xff1f;由于数组创建时需要指定其长度&#xff0c;而且不能改变。集合不需要指定长度&#xff0c;空间不够集合自己会调整。集合里有很多见名知意的方法。 java1.8之后新有的removeIf用法 remove…

MySQL 日志

目录 一、日志概述 二、二进制日志 1、开启二进制日志 2、查看二进制文件 3、删除二进制日志文件 4、恢复二进制日志 5、暂时停止二进制日志功能 三、错误日志 1、启动和设置错误日志 2、查看错误日志 3、删除错误日志 四、通用查询日志 五、慢查询日志 一、日志概…

Qt 信号槽连接方式

使用示例&#xff1a; QObject::connect(sender, SIGNAL(signal()), receiver, SLOT(slot()), Qt::AutoConnection); 目录 连接方式 一、AutoConnection 二、DirectConnection 三、QueuedConnection 四、BlockingQueuedConnection 五、UniqueConnection 总结 连接方式 "q…

IPC之System V vs POSIX

文章目录 IPC示例共享内存POSIX shmSystem V shm IPC 当谈到IPC&#xff08;Inter-Process Communication&#xff0c;进程间通信&#xff09;时&#xff0c;它是指不同进程之间进行数据交换和通信的机制。 它允许在操作系统中运行的不同进程之间传输数据&#xff0c;这些进程…

Shell 编程:探索 Shell 的基本概念与用法

目录 Shell 简介 Shell 脚本 Shell 脚本运行 Shell 变量 1、创建变量和赋值 2、引用变量 3、修改变量的值 4、只读变量 5、删除变量 6、环境变量 Shell 字符串操作 1、拼接字符串 2、字符串长度 3、字符串截取 Shell 数组 1、创建数组 2、访问数组元素 shell …

数组分割(2023省蓝桥杯)n种讨论 JAVA

目录 1、题目描述&#xff1a;2、前言&#xff1a;3、动态规划&#xff08;bug)&#xff1a;3、递归 剪枝&#xff08;超时&#xff09;&#xff1a;4、数学&#xff08;正解&#xff09;&#xff1a; 1、题目描述&#xff1a; 小蓝有一个长度为 N 的数组 A [A0, A1,…, AN−…