offset系列属性

最新推荐文章于 2022-12-01 10:23:07 发布
最新推荐文章于 2022-12-01 10:23:07 发布
阅读量277 收藏
点赞数
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshi6yi/article/details/123823426
版权

offsetTop/offserLeft 可以返回元素的偏移位置（不带单位为的数值）相对于带有定位的父级 没有则是相对于body

offsetWidth/offsetHeight 可以得到元素的大小 是包括padding+border+width

clientWidth 得到的元素大小不包含边框

offsetParent 返回带有定位的父亲节点

如何计算出鼠标在盒子里的坐标

x = e.pageX - this.offsetLeft;

y = e.pageY - this.offsetTop;

案例：京东放大镜效果

1.当鼠标京图片时显示遮罩层 和放大图片

2.计算得出遮罩层的移动距离（就是鼠标在图片盒子上的坐标）（为了让鼠标在遮罩层的中间可使坐标分别减去遮罩层的宽高）

3.限制遮罩层的移动距离，当坐标小于0时使它等于0，当它大于最大移动距离时就等于最大移动距离（图片盒子的宽度-遮罩层的宽度）

4.将坐标赋值给遮罩层的left和top

5.放大镜图片的移动距离 = 遮罩层移动距离*放大镜的最大移动距离/遮罩层最大移动距离

前端小白HW
关注
JS图片放大镜效果
xiaobaijava123的博客
05-31 394
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数..
WebAPI-offset系列属性
weixin_44486539的博客
12-05 397
offset 翻译过来就是 “偏移量” 的意思，通过 offset 系列的属性可以动态的获取元素的宽、高、top值、left值等；offset 系列获取的值均没有单位都是数字类型。 offsetParent element.offsetParent 该属性会返回当前元素最近的带有定位的父级元素，如果父级元素都没有设置定位则返回 body 标签 element 需要获取对应值的 DOM 元素 &...
offset系列、client系列、scroll系列的属性
yawhom的博客
06-29 1100
1. offset系列属性 1.1 offsetTop属性: 此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。 返回值是一个整数，单位是像素。 1.2 offsetLeft属性: 此属性和offsetTop的原理是一样的，只不
offset常用的属性
liulang68的博客
07-07 490
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
[JavaScript] offset系列属性
qq_49900295的博客
03-17 914
offset概述 offset 翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等 1.获得元素距离带有定位父元素的位置 2. 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 offset系列常用属性 注意： 1.element.offsetTop及element.offsetLeft以带有定位的父亲为准，如果没有父亲或者父亲没有定位则以body为准 2.element.offsetWidth和element.offsetHeight 返回的宽度及高
三大系列：offset，scroll，client
weixin_47450807的博客
03-07 1225
一、写在前面 之前一直对于offset，scroll, client这几大属性表示很懵，今天一文针对这些属性进行总结，从此再也不懵逼。 二、offset系列 1、offsetWidth属性 offsetWidth返回当前的元素宽度，这个宽度包括内容的宽度 + border的宽度 + padding的宽度。 offsetWidth是只读属性 2、offsetHeight属性 offsetHeight返回的是当前元素的高度，这个高度包括内容的高度 + border的高度 + offsetHeight是只读属性
元素偏移量offset系列+offset和style的区别+案例-京东放大镜效果
phoebemeng的博客
07-18 224
元素偏移量offset系列+offset和style的区别+案例-京东放大镜效果
利用offset家族实现放大镜效果（模仿京东手机放大镜）
weixin_45044076的博客
07-25 226
offset家族分为offsetWidth，offsetHeight，offsetLeft和·offsetTop用于表示元素的偏移量，计算元素偏移的最大距离。 基本思路如下： （1）首先设置遮罩层mask，获取鼠标的坐标给mask。由于鼠标在mask层中心，计算鼠标在盒子的坐标时减半，即 varx=e.pageX-this.offsetLeft-mask.offsetWidth/2; ary=e.pageY-this.offsetTop-mask.offse...
JavaScript——元素偏移量offset系列&案例
最新发布
shhghvvh的博客
12-01 601
offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。获得元素距离带有定位父元素的位置返回的数值都不带单位1.2offset系列常用属性。
offset属性详解
weixin_43977847的博客
08-17 914
偏移量 一共四个属性。 一个定位父级 offsetParent offsetLeft offsetTop offsetHeight offsetWidth offsetParent offsetParent 与当前元素最近的定位（即 position 属性不为 static！！！）父级元素 当元素自身有 fixed 固定定位时，offsetParent 的结果为 null。 原因在于固定定位的元素相对于视口进行定位，此时是没有父级的。 元素自身没有 fixed 定位，且父元素都未经过定位，off
offset属性
CLINGGG的博客
05-14 288
setinterval(function(){},30):定时器的使用（每隔一段时间执行一次）。 settimeout(function(){),30):定时器 （在设定的时间里执行力执行一次就不再执行函数） offsetwidth, offsetheitght, offsetleft, offsetright.   元素距离浏览器左边的值......   包括margin, padding
PC端网页特效-offset系列属性
xy_is_fhh的博客
11-14 462
offset概述：offset翻译是偏移量，使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 · 获得元素距离带有定位父元素的位置 · 获得元素自身的大小(宽度高度) 注意：返回的数值都不带单位 offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回<body> element.offsetTop 返回元素相对带有定位父元素上方的偏移 elem...
Web APIs 学习笔记（七）--- offset、client和scroll系列属性
weixin_45092437的博客
05-16 966
一、元素偏移量 offset 系列属性 1、offset 概述 ​ offset系列属性可以动态的获得页面中某元素的偏移量，也就是元素位置，以及元素的宽度高度等属性。但是要注意，获得的元素的偏移量是元素相对于带有定位的父元素的位置，如果没有带定位的父元素，则是相对于页面的位置。而且获得的元素的宽度和高度是包括元素的border、padding的。最后所有属性的返回值都是数值型，不带单位。 2、offset系列属性 ​ 总结： **offsetWidth=width+padding+border
元素偏移offset的常用属性
weixin_46682277的博客
04-02 1093
offset是偏移量的意思，使用offset相关的属性可以动态得到元素的位置(偏移)、大小等。 可以获得该元素距离带有定位父元素的位置 可以获得元素自身的大小(宽和高) offset返回的值都是不带单位的，只返回数字 ...
js中offset，client等属性值分析
YoHoooo_的博客
12-07 916
1.offset的5个成员 offsetWidth(width+border+padding):表示元素除去margin后的元素宽度 offsetHeight(height+border+padding):表示元素除去margin后的元素高度 offsetLeft：表示距离有定位的父级的left值（用offsetParent可以用来测试） offsetTop：表示距离有定位的父级的top值...
js常用属性offset/style/client/scroll/鼠标事件和方法的封装
JackieDYH的博客
05-27 846
1. 元素偏移量 offset 系列 1.1 offset 概述 offset — 偏移量， 使用 offset 系列相关属性可动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置； 获得元素自身的大小（宽度高度）。 注： 返回的数值都不带单位 offset 系列常用属性： offset 系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素，如果父级元素没有定位，则返回body element.offsetTop
javascript基础：偏移量（offset）和 client 常用属性以及实例
u011863822的博客
04-28 1841
主要聊一些偏移量的常用属性，offsetTop，offsetLeft，offsetWidth，offsetHeight等。以及 offsetWidth和style中区别，还有经典的商品展示放大镜的效果实现。以及client的常用属性。
JavaScript offset与匀速动画深度解析及轮播图实现
offset属性提供了获取元素在页面布局中的实际位置和大小的能力，而匀速动画则可以平滑地改变这些属性，实现诸如轮播图等动态效果。 **offset属性详解** offset属性主要由以下几个部分组成： 1. **offsetWidth** ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值