JavaScript 鼠标移动事件

article/2025/9/5 15:48:11

今天我要分享的JavaScript鼠标移动事件的知识点

1.首先准备一个文件夹和一张GIF的动图,打开VS Code,新建一个文件,Ctrl+S保存文件,输入文件名,文本类型设置成HTML,如下图所示;

2.在文档里输入英文状态下的感叹号+回车键,如下图所示;

3.在body里输入img标签,把GIF图引入,在img标签里输入style属性,设置定位,宽和高如下图所示;

4.现在开始写JavaScript代码:

(1)获取img标签,然后添加鼠标移动事件,事件=事件或窗口事件。

(2)clientX和clientY用于获取当前看见窗口的坐标,clientX指的是鼠标指针的水平坐标,clientY指的是鼠标指针的垂直坐标。

(4)通过img的top和left设置鼠标在img的位置调整;

5.以下的是JS的代码

6.小结:

clientX和clientY用于获取鼠标当前可见坐标。

clientX指的是鼠标指针的水平坐标。

clientY指的是鼠标指针的垂直坐标。

这是我所学到的鼠标移动事件步骤,所以我要分享给你们,希望可以帮助到你们。

以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔!


http://chatgpt.dhexx.cn/article/EFFIrPwJ.shtml

相关文章

js 鼠标按下并移动事件

html源码&#xff1a; <divonMouseDown{(e) >fn1(e)}onMouseUp{(e)>fn2(e)}>内容</div> js源码 fn1(event) > { //鼠标按下事件console.log(onMouseDown, event); //鼠标按下时移动鼠标事件&#xff08;鼠标未抬起&#xff09;document.onmousemove fun…

JS小技巧:鼠标悬停事件

简单的JS悬停图片变换 不多bb先看效果图 可以看到鼠标悬停在不同的标题上时&#xff0c;下方的图片会产生相应变换 代码如下 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><style>* {margin: 0;p…

js鼠标事件

通过鼠标触发事件, 类似用户的行为: 属性 描述 onclick 当单击鼠标时运行脚本 ondblclick 当双击鼠标时运行脚本 onmousedown 当按下鼠标按钮时运行脚本 onmousemove 当鼠标指针移动时运行脚本 onmouseout 当鼠标指针移出元素时运行脚本 onmouseover 当鼠标指针移…

用js给div添加鼠标悬停事件

新任务:给表格上的某列添加鼠标悬浮事件 但是表格是由omGrid生成的,无法修改 所以只能先获取,再添加事件 先用firebug看清表格结构:\ 是div class"innerCo1 " class还是有空格的,为此还纠结了下.. js代码: var obj document.getElementsByTagName("div&quo…

JavaScript的DOM之鼠标悬浮事件

JS的DOM之鼠标悬浮事件 鼠标悬浮事件之onmouseover()和onmouseout()事件 这里用大白话介绍一下最简单的原理&#xff1a; 就是当鼠标在这块区域时候会触发相应事件&#xff0c;将鼠标挪开则恢复原先事件 附上代码 <!DOCTYPE html> <html lang"en"> <…

如何调试JS中鼠标悬停事件影响的元素?

如何调试JS中鼠标悬停事件影响的元素&#xff1f; 在日常的前端开发中&#xff0c;我们经常要调试许多其他开发者写的网站和代码。此时我们往往会打开浏览器的开发者工具&#xff0c;在 Elements,Console,Network,Sources,Performance 等多个 Tab 之间来回穿梭。 今天笔者来分…

js实现鼠标悬停事件

介绍&#xff1a;把鼠标放在选择框上实现文字浮现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>第一个JS</title><style>#div1 {width: 100px;height: 100px;background-color: red;b…

宜搭低代码与Faas构建数据看板

写在前面 数字化办公兴起&#xff0c;企业改变办公方式迫在眉睫&#xff0c;低代码是一个发展方向 目录 写在前面 环境及目的 表单&连接器&Faas 表单 连接器&Faas Faas 连接器配置 结语 环境及目的 平台&#xff1a;钉钉宜搭低代码 Faas:nodejs v12.20.0 …

faas函数使用

faas-cli 是一款 OpenFaaS 官方工具&#xff0c;在faas项目中使用频繁&#xff0c;作为与API GateWay沟通的桥梁工具&#xff0c;相当重要。它用于创建、部署OpenFaas函数应用 &#xff0c;支持从多种语言模板构建 (例如 Node.js, Python, CSharp and Ruby).&#xff0c;在实际…

Nodejs也能Serverless?从0开始用Nodejs打造一个FaaS服务

本篇文章并不是教你怎么用阿里云、谷歌云等等云框架的FaaS服务&#xff0c;而是教你如何从0开始打造一个自己的FaaS服务。 受限于人力及成本原因&#xff0c;现在的FaaS服务基本上可以说是“大厂玩物”&#xff0c;而网上鲜有相关代码的实现&#xff0c;因此我才打算写一篇文章…

OpenFaaS介绍

FaaS 云计算时代出现了大量XaaS形式的概念&#xff0c;从IaaS(Infrastructure as a Service)、PaaS(Platform as a Service)、SaaS(Software as a Service)到容器云引领的CaaS(Containers as a Service)&#xff0c;再到火热的微服务架构&#xff0c;它们都在试着将各种软、硬…

深入理解无服务器架构(Faas/Serverless)

摘要 无服务器架构(Faas/Serverless)&#xff0c;是软件架构领域的热门话题。 AWS&#xff0c;Google Cloud和Azure - 在无服务器上投入了大量资金&#xff0c;已经在看到了大量专门针对Faas/Serverless的文章、书籍&#xff0c;开源项目&#xff0c;会议。 但什么是无服务器&…

PaaS、IaaS 、SaaS、Bass、Fass、无服务的理解与区别

云计算&#xff08;cloud computing&#xff09; 关于云计算的定义有多种说法&#xff0c;现阶段广为接受的是美国国家标准与技术研究院&#xff08;NIST&#xff09;定义&#xff1a;云计算是一种按使用量付费的模式&#xff0c;这种模式提供可用的、便捷的、按需的网络访问&…

云计算服务类型都是什么?IaaS、PaaS、SaaS、BaaS、FaaS

云计算服务类型都是什么&#xff1f;IaaS、PaaS、SaaS、BaaS、FaaS 基本概念 云计算主要分为 4 种类型&#xff1a;私有云、公共云、混合云和多云。 同时&#xff0c;云计算服务主要有 3 种&#xff1a;基础架构即服务&#xff08;IaaS&#xff09;、平台即服务&#xff08;P…

简单介绍一下Serverless和Faas

一、啥叫Serverless(无服务器) Like many trends in software, there’s no one clear view of what Serverless is. For starters, it encompasses two different but overlapping areas: (就是一般定义为两种不同但交叉的领域&#xff1a;Faas和Baas) Serverless was first…

Faas

文章介绍了Faas是什么&#xff0c;FaaS的特点、以及它的好处&#xff0c;和基于Kubernetes的FaaS框架Fission等&#xff0c;希望能对您有所帮助。 前言 云计算时代出现了大量XaaS形式的概念,从IaaS、PaaS、SaaS到容器云引领的CaaS,再到火热的微服务架构,以及现在越来越多被谈…

XaaS形式的概念,从IaaS、PaaS、SaaS到容器云引领的CaaS,Serverless和FaaS 概念

XaaS IaaS、PaaS、SaaS CaaS&#xff0c;Serverless 和FaaS 和lambda 前言 云计算时代出现了大量XaaS形式的概念,从IaaS、PaaS、SaaS到容器云引领的CaaS,再到火热的微服务架构,以及现在越来越多被谈起的Serverless和FaaS,我们正在经历?一个技术飞速变革的时代。 一、什么是…

IaaS, PaaS, SaaS, BaaS, Faas

aaS 是 As-a-Service 即为服务 的意思。 IaaS (Infrastructure as a Service) wikipedia&#xff1a;基础设施即服务 服务商提供底层/物理层基础设施资源&#xff08;服务器&#xff0c;数据中心&#xff0c;环境控制&#xff0c;电源&#xff0c;服务器机房&#xff09;&…

云原生:什么是 FaaS ?

概述 FaaS&#xff0c;Function as a Service&#xff0c;"功能即服务"&#xff08;也译作“函数即服务”&#xff09;&#xff0c;是一种在无状态容器中运行的事件驱动型计算执行模型&#xff0c;这些功能将利用服务来管理服务器端逻辑和状态。 它允许开发人员以功…

【AI FaaS:NLaaS 自然语言即服务】设计一个自然语言生成 SQL 查询语句的 AI Faas API 系统

设计一个AI Faas API 系统,支持自然语言生成SQL,并查询数据源数据返回表数据。同时,支持API开发完成即可线上使用。给我详细系统设计说明和完整的Golang代码,解释说明。5000字以上。 文章目录 【AI FaaS:NLaaS 自然语言即服务】设计一个自然语言生成 SQL 查询语句的 AI Faa…