Web API JS原生网页常用特效系列详解

发布日期:2022-01-12 12:16   来源:未知   

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

  获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)返回的数值都不带单位

  当我们鼠标按下, 就获得鼠标在盒子内的坐标鼠标移动的时候,把鼠标在页面中的坐标,减去 鼠标在盒子内的坐标就是模态框 的left和top值鼠标弹起,就让鼠标移动事件移除例如放大镜效果:

  3.算出左边大图的移动距离(大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离)

  client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态地得到该元素的边框大小、元素大小等。

  client 宽度 和我们offsetWidth 最大的区别就是 不包含边框 ,他们的用法基本相似

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

  如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。

  例如在很多网站都会有返回顶部按钮 ,向下滚动一定的距离后按钮出现 ,上滑一定的距离后按钮又消失 ,当点击按钮后能够返回顶部的效果

  首先要获取元素 ,并且拿到所有参与交互的各个位置元素的顶部偏移量offsetTop ,右侧边栏sliderbar在被滚动遮挡后会变成固定定位 ,点击返回头部按钮 ,会回到header的顶部偏移量

  发生页面滚动事件( scroll)页面滚动到banner区头部右侧边栏sliderbar会变成固定定位 ,滚动到main主体时goback按钮会出现

  当点击goback按钮后会返回头部区域 ,此时让页面的头部偏移量等于文档scrollTop或者让scrollTop等于0实现返回顶部手机看香港最快开奖结果