JS | 元素偏移量offset——“模态框”以及“仿京东放大镜效果页面”案例分析
目录
1.1 offset概述
1.2 offset 与 style 区别
1.3 模态框案例
1.4 仿京东放大镜效果页面
1.1 offset概述
offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
- 注意：返回的数值都不带单位
其中的element.offsetParent，是返回该元素带有定位的父级元素，我们之前在学习操作元素的父级元素是【son.parentNode】，那么它们之间有什么区别呢？
- son.offsetParent：返回带有定位的父亲，否则返回的是body
- son.parentNode： 返回父亲，是最近一级的父亲，不管父亲有没有定位
1.2 offset 与 style 区别
offset:
- offset可以得到任意样式表中的样式值
- offset系列获得的数值是没有单位的
- offsetWidth包含 padding +border +width
- offsetWidth等属性是只读属性，只能获取不能赋值
- 所以，我们想要获取元素大小位置，用offset更合适
style:
- style只能得到行内样式表中的样式值
- style.width获得的是带有单位的字符串
- style.width获得不包含padding和border的值
- style.width是可读写属性，可以获取也可以赋值
- 所以，我们想要给元素更改值，则需要用style改变
1.3 模态框案例
案例分析：
- 点击弹出层，模态框和遮挡层会显示出来（display:block)
- 点击关闭按钮，模态框和遮挡层应付隐藏起来(display:none)
- 在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标
- 触发事件是鼠标按下mousedown，鼠标移动mousemove，鼠标松开mouseup
- 拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了
- 鼠标按下触发的事件源是最上面一行，就是title
- 鼠标在页面的坐标 - 鼠标在盒子内的坐标，才是模态框的位置
- 鼠标按下，我们要得到鼠标在盒子的坐标
- 鼠标移动，就让模态框的坐标设置为：鼠标坐标 - 鼠标在盒子里的坐标即可，注意移动事件写到按下事件里面。
- 鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除
HTML：
登录框关闭用户名：登录密码：CSS：
JS：
1.4 仿京东放大镜效果页面
案例分析：
- 遮挡层跟随鼠标功能
- 把鼠标坐标给遮挡层不合适，因为遮挡层坐标以父盒子为准
- 首先是获得鼠标在盒子的坐标
- 之后把数值给遮挡层做为left和top值，通过style来设置
- 此时乃至鼠标移动事件，在盒子里的移动【box】
- 遮挡层位置与鼠标位置离得太远，原因是遮挡层自身的宽度和高度，所以要减去遮挡层的一半
- 遮挡层不能超出盒子范围
- 如果小于0，就把坐标设置为0
- 如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
- 遮挡层的最大移动距离：盒子宽度 - 遮挡层的宽度
我们先来看一下结构，我的结构是随便搭的，和官网样式不同，主要看是怎样实现的。
HTML：
//盒子
//遮挡层CSS:
JS：
到这之后，我们遮挡层在盒子中的移动基本已经完成了，但是我们要的效果是当我们鼠标移动某个地方时，大图是相应的放大效果，这个我们是怎么完成呢?
其中比较的核心是一个等比例公式！
好啦好啦，关于元素偏移量今天就说这么多，拜比~
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！