JS网页特效

2020年6月30日 作者 张舫

元素偏移量offset系列(就是查看元素位置)

  • offset翻译过来就是偏移量,我们是用offset系列相关属性可以动态地得到该元素的位置(偏移),大小等
  • 获得元素距离带有定位父元素的位置
  • 获得元素自身的大小
  • 返回的数值没有单位

 offset与style区别

  • offset可以得到任意样式表的样式值
  • 获取的数值没有单位
  • offsetWidth 包含 padding+border+offsetWidth
  • offsetWidth 等属性是只读属性,只能获取不能赋值

  • style只能得到行内样式表的样式
  • style.widht获得的数值带有单位
  • style.widht 获得不包括 padding 和 border
  • style.widht 是可读可写的属性

小案例 (获取鼠标在元素上的位置)

小案例(鼠标拖动元素效果)

小案例(手机端触摸拖动)

小案例(放大镜)

元素可视区域client系列

  • client翻译过来就是客户端,我们是用client系类的相关属性来获取元素可视区的相关信息,通过相关属性可以动态得到该元素的边框大小,元素大小
  • client和offset的区别 offset带边框 client不带边框

 

元素滚动scroll系列

scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小,滚动距离等.

如何快速获取页面滚动值 document就是页面

页面被卷去的头部兼容性解决方案

  • 声明DTD  <!DOCTYPE html> 使用 document.documentElement.scrollTop
  • 未明DTD  <!DOCTYPE html> 使用 document.body.scrollTop
  • 新方法 window.pageYoffset 和 window.pageXoffset IE9 开始支持

javaScript简单动画效果函数封装

简单动画效果函数(应用1 鼠标浮动移出菜单)

简单动画效果函数(应用2 无缝轮播图)

小案例(手机端Touch事件无缝轮播图 手机端轮播图)