元素偏移量 offset 系列

元素偏移量 offset 系列

文章目录

​​offset 概述​​​​offset 与 style 区别​​​​案例一：模态框拖拽​​

​​思路：​​​​代码实现：​​

​​案例二：京东放大镜​​

​​思路：（分为三大部分）​​​​代码实现​​

offset 概述

offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）返回的数值都不带单位

offset 系列常用属性：

offset 与 style 区别

​​offset​​

offset 可以得到任意样式表中的样式值offset 系列获得的数值是没有单位的offsetWidth 包含padding+border+widthoffsetWidth 等属性是只读属性，只能获取不能赋值所以，我们想要获取元素大小位置，用offset更合适

​​sytle​​

style 只能得到行内样式表中的样式值style.width 获得的是带有单位的字符串style.width 获得不包含padding和border 的值style.width 是可读写属性，可以获取也可以赋值所以，我们想要给元素更改值，则需要用style改变

案例一：模态框拖拽

其本质就是实现一个拖动效果

思路：

① 鼠标按下，我们要得到鼠标在盒子的坐标。 ② 鼠标移动，就让模态框的坐标 设置为 ： 鼠标坐标 减去盒子坐标即可，注意移动事件写到按下事件里面。 ③ 鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除

代码实现：

注意onmousedown在一直按下鼠标的时候，不会反复触发

案例二：京东放大镜

思路：（分为三大部分）

第一部分： 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能

做法： ① 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能 ② 就是显示与隐藏

第二部分： 黄色的遮挡层跟随鼠标功能。

做法： ① 黄色的遮挡层跟随鼠标功能。 ② 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。 ③ 首先是获得鼠标在盒子的坐标。 ④ 之后把数值给遮挡层做为left 和top值。 ⑤ 此时用到鼠标移动事件，但是还是在小图片盒子内移动。 ⑥ 发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。 ⑦ 遮挡层不能超出小图片盒子范围。 ⑧ 如果小于零，就把坐标设置为0 ⑨ 如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离 ⑩ 遮挡层的最大移动距离： 小图片盒子宽度 减去 遮挡层盒子宽度

第三部分： 移动黄色遮挡层，大图片跟随移动功能

做法：

代码实现

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。