JS特效

标签：span   offset   大小   位置   页面   ble   案例   this   坐标   

1.PC端网页特效

　　1.1 offset

　　1.2 offset 与 style 区别

　　1.3案例：获取鼠标在盒子内的坐标

2.移动端网页特效

1.PC端网页特效

1.1 offset

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

获得元素距离带有定位父元素的位置

获得元素自身的大小（宽度高度）

注意： 返回的数值都不带单位

offset 系列常用属性：

1.2 offset 与 style 区别

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

实现代码：

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.移动端网页特效

JS特效

标签：span   offset   大小   位置   页面   ble   案例   this   坐标   

原文地址：https://www.cnblogs.com/royal6/p/12259509.html