PC 端网页特效

元素偏移量 offset 系列

  • offset 概述

    • offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等
    • 获得元素距离带有定位父元素得到位置
    • 获得元素自身的大小（宽度高度）
    • 注意：返回的数值都不带单位
    • 常用属性

      • offsetTop

      • offsetLeft

        • 以带有定位的父亲为准

      • offsetParent

        • 返回带有定位的父亲，否则返回 body

      • offsetWidth

      • offsetHeight

元素可视区 client 系列

  • 概述

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

元素滚动 scroll 系列

  • 概述

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

  • 动画函数封装

    • 动画实现原理

      • 通过定时器 setInterval() 不断移动盒子位置

    • 时间步骤

      • 获取当前盒子位置
      • 让盒子在当前位置加上 1 个移动距离
      • 利用计时器不断重复这个操作
      • 加一个结束定时器的条件
      • 注意此元素需要添加定位，才能使用 element.style.left

    • 缓动效果原理

      • 缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

      • 思路

          1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
          1. 核心算法：（目标值 - 现在的位置） / 10 做为每次移动的距离 步长
        • 停止的条件是：让当前盒子位置等于目标位置就停止定时器

    • 动画函数添加回调函数

      • 原理

        • 函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。

常见网页特效案例

  • 轮播图
  • 回到顶部
  • 筋斗云案例

移动网页端特效

触屏事件

触屏事件概述

  • 移动端浏览器兼容性好，无需考虑兼容性问题，可以放心使用原生 JS 书写效果，但是移动端有自己独特的地方。比如触屏事件 touch （也称触摸事件），Android 和 IOS 都有

触摸事件对象

  • touchstart
  • touchmove
  • touchend

移动端拖动元素

    1. touchstart、touchmove、touchend可以实现拖动元素
    1. 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的 pageX 和 pageY
    1. 移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
    1. 手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置

  • 拖动三部曲

    • 触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置
    • 移动手指 touchmove：计算手指的滑动距离，并且移动盒子
    • 离开手指 touchend：

  • 注意：手指移动也会触发滚动屏幕，所以这里要阻止默认的屏幕滚动 e.preventDefault()

  • 移动端常见特效

    • 案例：移动端轮播图

        1. 可以自动播放图片
        1. 手指可以拖动播放轮播图

  • 移动端常用开发插件

  • 移动端常用开发框架

    • fastclick
    • swiper
    • bootstrap