【前端】JavaScript-PC端网页特效

news2025/7/29 22:02:25

目录

一、元素偏移量offset系列

1.1offset概述

 1.2offset与style区别

二、元素可视区client系列

 立即执行函数

三、元素滚动scroll系列

 三大系列总结

 mouseenter和mouseover的区别


一、元素偏移量offset系列

1.1offset概述

offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。

  • 获得元素距离带有定位父元素得位置
  • 获得元素自身的大小(宽度高度)
  • 注意:返回得数值都不带单位

offset系列常用属性:

 1.2offset与style区别

  • offset可以得到任意样式表中的样式值,.style只能得到行内样式表中的样式值
  • offset系列获得的数值是没有单位的,.style.width获得的是带有单位的字符串
  • offsetWidth包含padding+border+width,.style.width获得不包含padding和border的值
  • offsetWidth等属性是只读属性,只能获取不能赋值,.style.width是可读属性,可以获取也可以赋值
  • offset更适合用于获取元素大小位置,.style.width更适合用于给元素更改值

二、元素可视区client系列

client系列的相关属性来动态获取元素可视区的相关信息

 立即执行函数

不需要调用,立马能够自己执行的函数

        // 第一种写法
        (function (形参) { 
        //函数体
        })(实参);
        // 第二种写法
        (function (形参) {
        //函数体
         }(实参));

作用:创建一个独立的作用域,避免了命名 冲突问题。

三、元素滚动scroll系列

scroll系列的相关属性可以动态的得到元素的大小,滚动距离等。

 三大系列总结

 mouseenter和mouseover的区别

 mouseover鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter只经过自身盒子触发。

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

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

相关文章

三十四、Java Iterator(迭代器)

Java Iterator(迭代器) Java Iterator(迭代器)不是一个集合,它是一种用于访问集合的方法,可用于迭代 ArrayList 和 HashSet 等集合。 Iterator 是 Java 迭代器最简单的实现,ListIterator 是 Co…

使用Emscripten编译Eigen算法模块为WebAssembly

前言 最近大降温,才意识到秋天是真的来了。古人有诗云:“眉如青山黛,眼似秋波横。”这足以说明秋天的水是多么的浪漫、多情、温柔。 秋天都懂得浪漫,你天天被人说木讷,何不做点改变?今天我来教大家属于程…

Android 开发音频录播中媒体录制器MediaRecorder和媒体播放器MediaPlayer的讲解及实战(超详细 附源码)

需要源码请点赞关注收藏后评论区留下QQ~~~ 一、媒体录制器MediaRecorder MediaRecorder是Android自带的音视频录制工具,它通过操纵摄像头和麦克风完成媒体录制,既可录制视频又可以单独录制音频 下面是它的常用方法 reset 重置录制资源 prepare 准备录制…

C/C++语言 3 —— 输入输出

C语言的io函数&#xff1a; printf 输出 和 scanf输入 是 C语言的标准IO函数的一部分&#xff1a; scanf函数会将屏幕上输入的字符&#xff0c;根据格式的要求转化为对应的数据&#xff1a; scanf 需要提供内存地址代码&#xff1a; #include <iostream> using nam…

【数字电路基础】进制转换:二进制、十进制、八进制、十六进制、反码、补码、原码

文章目录 一、无符号数进制转换1.1、十进制转二、八、十六1.1.1、 十进制转二进制1.1.2、 十进制转八进制1.1.2、 十进制转十六进制1.2、二、八、十六转十进制1.3 二进制转八、十六1.4 八、十六转二进制1.4 八转十六二、有符号数进制转换2.1 正数进制转换2.2 负数进制转换一、无…

Linux安装Tomcat详细教程(图文)

1、下载Linux版本****的Tomcat 下载地址 2、在usr目录下新建tomcat目录&#xff0c;然后将下载的tomcat拷贝到新建的tomcat目录中 创建目录命令&#xff1a;mkdir /usr/tomcat 3、进入到tomcat目录中解压下载的tomcat安装包 解压命令&#xff1a;tar -zxvf apache-tomcat-8…

自动驾驶感知算法实战13——自动驾驶感知未来发展方向分享

自动驾驶感知算法实战专栏:https://blog.csdn.net/charmve/category_12097938.html目录 发展方向:分享:自动驾驶3.0未来需要解决的问题发展方向: 多模态感知 多任务处理 大模型(通用智能) 分享: 自动驾驶3.0 第一,自动驾驶3.0是数据驱动,更是“真实场景下的海量大数据…

底物多肽Phe-Gly-His-Phe(NO2)-Phe-Ala-Phe-OMe、50572-79-7

胃蛋白酶的良好底物&#xff0c;也被组织蛋白酶 D 切割。 A good substrate for pepsin which is also cleaved by cathepsin D.编号: 402332 中文名称: Phe-Gly-His-Phe(NO2)-Phe-Ala-Phe-OMe CAS号: 50572-79-7 单字母: H2N-FGH-F(4NO2)-FAF-OMe 三字母: H2N-Phe-Gly-His-Phe…

企业信息化的供给侧改革

企业信息化建设供给侧改革的新思路 传统的企业信息化建设思路是什么呢&#xff1f;它是从需求侧的规划跟实施入手的&#xff0c;然后解决做哪些和怎么做业务信息化的问题&#xff0c;用不着关注承担这个项目建设的供给体系的质量、效率、结构问题。这就会导致在项目建设过程中…

[附源码]java毕业设计在线视频网站

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

垃圾分类解决方案-最新全套文件

垃圾分类解决方案-最新全套文件一、建设背景垃圾分类的意义1.为什么要进行垃圾分类2.智慧垃圾分类的重要性二、建设思路三、建设方案四、获取 - 垃圾分类全套最新解决方案合集一、建设背景 垃圾分类的意义 1.为什么要进行垃圾分类 将易腐有机成分为主的厨房垃圾单独分类&…

运动需要的装备有哪些?2022年运动装备推荐

全民开始运动的今天&#xff0c;越来越多的年轻人会选择在一天的忙碌之后通过简单的运动缓解疲劳。而在运动装备的选择上&#xff0c;由于种类和品牌太多&#xff0c;小白很难从中选择到适合自己的运动装备&#xff0c;作为一个资深运动爱好者&#xff0c;对这方面是非常在行的…

「运维有小邓」如何更有效的避免密码攻击

在这表文章中&#xff0c;让我们一起了解密码在网络安全中的重要性&#xff0c;在我们的日常工作中&#xff0c;密码泄露事件是常发生的&#xff0c; 那今天我们就一起了解ManageEngine ADSelfService Plus 是如何强化您的密码并加强您的企业AD域安全性的。 运维有小邓 2022 年…

MCE | 打破 Western Blot 玄学操作

看我一顿操作猛如虎&#xff1a; 电泳 → 转膜 → 封闭 → 孵一抗 → 孵二抗 → 检测&#xff0c;剩下的就是等待。 图 1. Western blot 操作流程简介[1] 我的实验结果中出现了各种稀奇古怪的玩意儿&#xff1f;&#xff1f;&#xff1f; ■ 古怪一&#xff1a;高背景 萌 Cece…

合作|创邻科技携手海颐软件成功中标,Galaxybase图平台赋能广西电网业务升级

近日&#xff0c;烟台海颐软件股份有限公司&#xff08;简称“海颐软件”&#xff09;携手浙江创邻科技有限公司&#xff08;简称“创邻科技”&#xff09;成功中标南方电网广西电网有限责任公司&#xff08;简称“广西电网”&#xff09;课题项目。期待通过结合双方产品优势&a…

【车间调度】遗传算法求解车间调度问题(含甘特图)【含Matlab源码 2216期】

⛄一、车间调度简介 1 车间调度定义 车间调度是指根据产品制造的合理需求分配加工车间顺序&#xff0c;从而达到合理利用产品制造资源、提高企业经济效益的目的。车间调度问题从数学上可以描述为有n个待加工的零件要在m台机器上加工。问题需要满足的条件包括每个零件的各道工序…

如何将带GPS的网络化的软件定义无线电接收机应用于分布式和移动频谱监测?(一)

导言 无线信号无处不在。无线网络为我们的移动设备&#xff0c;物联网&#xff08;IoT&#xff09;&#xff0c;智能城市&#xff0c;自动驾驶汽车等提供动力。从基本视频流到整个公用电网的所有内容现在都依赖于可靠&#xff0c;高速和不间断的连接。这一新现实给频谱监测用户…

文本攻击textattack->openattack

一 文本对抗攻击的定义 很小的扰动&#xff0c;无法映射到原始输出。那么就是对抗样本&#xff0c;生成对抗样本的过程称为对抗攻击。 1.1 类型分类 根据是攻击者否了解模型的具体细节&#xff1a; 白盒攻击【攻击者可以访问模型的完整信息&#xff0c;包括模型结构&#xff0c…

表格软件之FineReport-JS实现大数据集导出(二)

1. 示例&#xff1a;大数据集导出动态参数值 1.1 新建模板 1.1.1 新建数据集 新建普通报表&#xff0c;新建数据集&#xff0c;SQL 语句如下&#xff1a; ds1&#xff1a;SELECT * FROM 销量 where 11 and 地区 in (${area}) and 销售员 in (${stuff}) ds2&#xff1a;SEL…

178. 分数排名

文章目录1.题目2.示例3.答案①系统自带函数1.题目 表: Scores -------------------- | Column Name | Type | -------------------- | id | int | | score | decimal | -------------------- Id是该表的主键。 该表的每一行都包含了一场比赛的分数。Score是一个有两位小数点的…