前端开发学习之 【PC端网页特效】

1.元素偏移量offset

在这里插入图片描述
element.parentNode:返回父亲
element.offsetParent:返回带有定位的父亲,否则就是body。
在这里插入图片描述
鼠标在页面中的坐标:e.pageX, e.pageY
盒子在页面中坐标:box.offsetLeft,box.offsetTop

2. 元素可视区client

在这里插入图片描述

在这里插入图片描述

立即执行函数
不需要调用,能自己执行。

写法:
(function(){})()(function(){}())

作用:
独立创建了一个作用域,里边所有变量都是局部变量,不会有命名冲突。

3.元素滚动scroll

在这里插入图片描述
加上溢出部分。

滚动事件
onscroll

4. 总结

在这里插入图片描述
在这里插入图片描述

5.mouseover和mouseenter

  • 当鼠标移动到元素上就会触发mouseenter事件;
  • mouseover鼠标经过自身和子盒子都会触发,但mouseenter只有在经过自身才会触发;
  • mouseenter与mouseleave都不冒泡。

6. 动画函数

动画实现原理:定时器使得盒子移动,注意盒子必须定位才能移动。
在这里插入图片描述
可以使用函数封装动画函数,传入移动元素和移动距离。但每个函数都开辟一个定时器,且定时器名字相同,所以可以将传入的元素设置为对象,包含元素和定时器两个属性。
不同的元素设置不同定时器:先把之前的定时器清除,再设置现在的。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_46056318/article/details/127298987
今日推荐