JS特效

Posted 2021-03-12 royal6

1.PC端网页特效

　　1.1 offset

　　1.2 offset 与 style 区别

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

2.移动端网页特效

 

1.PC端网页特效

1.1 offset

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

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

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

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

offset 系列常用属性：

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、 内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带单位

 

 

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