JS特效
2021-04-20 13:26
标签：span offset 大小 位置 页面 ble 案例 this 坐标 1.PC端网页特效 1.1 offset 1.2 offset 与 style 区别 1.3案例：获取鼠标在盒子内的坐标 2.移动端网页特效 offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意： 返回的数值都不带单位 offset 系列常用属性： offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素如果父级都没有定位则返回body element.offsetTop 返回元素相对带有定位父元素上方的偏移 element.offsetLeft 返回元素相对带有定位父元素左边框的偏移 element.offsetWidth 返回自身包括padding、边框、 内容区的宽度，返回数值不带单位 element.offsetHeight 返回自身包括padding、边框、内容区的高度，返回数值不带单位 offset offset 可以得到任意样式表中的样式值 offset 系列获得的数值是没有单位的 offsetWidth 包含padding+border+width offsetWidth 等属性是只读属性，只能获取不能赋值 所以，我们想要获取元素大小位置，用offset更合适 style style只能得到行内样式表中的样式值 style.width获得的是带有单位的字符串 style.width获得不包含padding和border的值 style.width是可读写属性,可以获取也可以赋值 所以,我们想要给元素更改值,则需要用style改变 分析： ① 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。 ② 首先得到鼠标在页面中的坐标（e.pageX, e.pageY） ③ 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop) ④ 用鼠标距离页面的坐标减去盒子在页面中的距离，得到 鼠标在盒子内的坐标 ⑤ 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件 mousemove 实现代码： JS特效 标签：span offset 大小 位置 页面 ble 案例 this 坐标 原文地址：https://www.cnblogs.com/royal6/p/12259509.html1.PC端网页特效
1.1 offset
1.2 offset 与 style 区别
案例：获取鼠标在盒子内的坐标
var box = document.querySelector(‘.box‘);
box.addEventListener(‘mousemove‘, function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = ‘x坐标是‘ + x + ‘ y坐标是‘ + y;
})
2.移动端网页特效
上一篇：blob数据ajax传输