PC端网页特效

1. 元素偏移量offset系列

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

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

   • 获得元素自身的大小(宽度高度)

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

   • offset系列常用属性

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

     • offsetTop和offsetLeft如果父亲没有定位，则以body为准，如果父亲有定位，则以父亲为准

   • offset与style区别

     • offset:

       • offset可以得到任意样式表中的样式值

       • offset系列获得的数值是没有单位的

       • offsetWidth包含padding+border+width

       • offsetWidth等属性是只读属性，只能获取不能赋值

       • 所以，我们想要获取元素大小位置，用offset更合适

     • style

       • style只能得到行内样式表中的样式值(写在标签里面的CSS)

       • style.width获取的是带有单位的字符串

       • style.width获得不包含padding和border的值

       • style.width是可读写属性，可以获取也可以赋值

       • 所以,我们想要 给元素更改值，则需要用style改变

2. 元素可视区client系列

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

   • client系列常用属性

     • client系列属性	作用
       element.clientTop	返回元素上边框的大小
       element.clientLeft	返回元素左边框的大小
       element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
       element.clientHeight	返回自身包括padding，内容区的高度，不含边框，返回数组不带单位

   • 立即执行函数：不需要调用，立马能够自己执行的函数

     • 1.语法规范 也可以传递参数进来

       • (function () {}) () 或者 (function(){}());

     • 2.示例代码

       • + (function(a,b){
         + console.log(2)
         + var num = 10; // 局部变量
         + console.log(a+b) //输出1
         + })(1,2)  //第二个小括号可以看做是调用函数

     • 如果有多个立即执行函数 必须用分号隔开

     • 3.立即执行函数最大的作用就是独立创建了一个作用域，里面的所有变量都是局部变量，不会有命名冲突的情况

   • 下面三种情况都会刷新页面都会触发load事件(了解)

     • 1.a标签的超链接

     • 2.F5或者刷新按钮(强制刷新)

     • 3.前进后退按钮

     • 但是火狐中，有个特点，有个"往返缓存"，这个缓存中不仅保存着页面数据，还保存了DOM和JS的状态；实际上是将整个页面都保存在了内存里

     • 所以此时后退 按钮不能刷新页面

     • 此时可以使用pageshow事件来触发，这个事件在页面显示时触发，无论页面是否来自缓存，在重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加

3. 元素滚动scroll系列

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

   • scroll系列常用属性

     • scroll系列属性	作用
       element.scrollTop	返回被卷去上侧距离，返回数值不带单位
       element.scrollLeft	返回被卷去的左侧距离，返回数组不带单位
       element.scrollWidth	返回自身实际的宽度，包含padding，不含边框，返回数值不带单位
       element.scrollHeight	返回自身实际的高度，包含padding，不含边框，返回数值不带单位

   • 页面被卷去的头部

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

     • 页面被卷去的头部:可以通过window.pageYOffset获得，

     • 如果是被卷去的左侧 window.pageXoffset获得

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

       • 需要注意的是，页面被卷去的头部，有 兼容性的问题 ，因此被卷去得到头部通常有如下几种写法

         • 声明了DTD,使用document.documentElement.scrollTop

         • 未声明DTD, 使用document.body.scrollTop

         • 新方法 window.pageYOffset和window.pageXOffset , IE9开始支持

           • DTD是写了这句话 < !DOCTYPE html>

   • 注意：

     • 元素被卷去的头部是element.scrollTop,如果是页面被卷去的头部则是window.pageYOffset

4. 三大系列总结

   • 三大系列大小对比	作用
     element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数组不带单位
     element.clientWidth	返回自身包括padding、内容去的宽度、不含边框，返回数值不带单位
     element.scrollWidth	返回自身实际的宽度，不含边框，返回数组不带单位

   • 他们主要用法：

     • 1.offset系列经常用于获得元素位置 offsetLeft offsetTop

     • 2.client经常用于获取元素大小 clientWidth,clientHeight

     • 3.scroll经常用于获取元素滚动距离 scrollTop scrollLeft

     • 4.主要页面的滚动的距离通过 window.pageXOffset获得 和window.pageYOffset

5. mouseenter和mouseover的区别

   • mouseenter鼠标事件

     • 当鼠标移动到元素上时就会触发mouseenter事件

     • 类似mouseover，它们两者之间的差别是

       • mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。

       • mouseenter只会经过自身盒子才会触发

       • 自身盒子 就是绑定事件的盒子

       • 之所以这样，mouseenter不会冒泡

     • 跟mouseenter搭配 鼠标离开 mouseleave同样不会冒泡

6. 动画函数封装(重点)

   • 1.动画实现原理

     • 核心原理：通过定时器setInterval() 不断移动盒子位置

     • 实现步骤：

       • 1.获得盒子当前的位置 通过offsetLeft获取

       • 2.让盒子在当前位置加上1个移动距离

       • 3.利用定时器不断重复这个操作

       • 4.加一个结束定时器的条件

       • 5.注意此元素需要添加定位，才能使用element.style.left

• 2.动画函数简单封装

  • 注意函数需要传递2个参数，动画对象和移动到的距离

    • 简单动画函数封装obj目标对象 target目标位置

    • 示例代码如下

    • function animate(obj,target){
      ​
      +  var timer = setInterval(function(){
      +  if(obj.offsetLeft > = target){
      +  //停止动画，本质是停止定时器
      +  •    clearInterval(timer);
      +  }
      +  obj.style.left = obj.offsetLeft + 1+'px'
      +  },30)
      +  }
      +  //调用函数   animate(div,300)

  • 3.动画函数给不同元素记录不同定时器

    • 如果多个元素都使用这个动画函数， 每次都要var声明定时器。我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)

  • 核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性

    • 示例代码如下

    • function animate(obj,target){
      ​
      + 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
      + 解决方案就是 让我们元素只有一个定时器 执行
      + clearInterval(obj.timer);先清除以前的定时器,只保留当前的一个定时器在走
      + obj.timer = setInterval(function(){
      + if(obj.offsetLeft > = target){
      + //停止动画，本质是停止定时器
      + •    clearInterval(obj.timer);
      + }
      + obj.style.left = obj.offsetLeft + 1+'px'
      + },30)
      + }
      + //调用函数   animate(div,300)
      + btn.addEventListener('click',function(){
      + animate(div,300)
      + })

  • 4.缓动动画原理

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

    • 思路：

    • 1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来

      • 2.核心算法:(目标值-现在的位置)/10 做为每次移动的距离步长

      • 3.停止的条件是：让当前盒子位置等于目标位置就停止定时器

      • 4.步长值为整数

    • 示例代码如下

      • function animate(obj,target){
        ​
        +  var timer = setInterval(function(){
        +  //步长值写到定时器里面    把步长值改为整数 不要出现小数的问题
        +  var step  =  (target - obj.offsetLeft)/10
        +  step=step>0? Math.ceil(step): Math.floor(step);
        +  if(obj.offsetLeft == target){
        +  //停止动画，本质是停止定时器
        +  •    clearInterval(timer);
        +  }
        +  //把每次加1 这个步长值改为一个慢慢变小的值
        +  // 步长公式：(目标值-现在的位置)/10
        +  obj.style.left = obj.offsetLeft + step  +'px'
        +  },15)
        +  }

    • 匀速动画 就是 盒子是当前的位置+ 固定的值10

    • 缓动动画就是 盒子当前的位置 + 变化的值(目标值-现在的位置)/10

    • 动画函数多个目标值之间移动

      • 可以让动画函数从800移动到500

      • 当我们点击按钮的时候，判断步长是正值还是负值

      • 1.如果是正值，则步长往大了取整

  • 5.动画函数添加回到函数

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

  • 回调函数的位置，写在定时器结束之后

    • 示例代码如下

    • function animate(obj,target,callback){
      ​
      +  var timer = setInterval(function(){
      +  //步长值写到定时器里面    把步长值改为整数 不要出现小数的问题
      +  var step  =  (target - obj.offsetLeft)/10
      +  step=step>0? Math.ceil(step): Math.floor(step);
      +  if(obj.offsetLeft == target){
      +  //停止动画，本质是停止定时器
      +  •    clearInterval(timer);
      +  if(callback){  如果回调函数存在就调用
      +  •    callback()
      +  }
      +  }
      +  //把每次加1 这个步长值改为一个慢慢变小的值
      +  // 步长公式：(目标值-现在的位置)/10
      +  obj.style.left = obj.offsetLeft + step  +'px'
      +  },15)
      +  }
      +  调用函数   animate(div,300 function(){
      +  span.style.backgroundColor = 'red'
      +  })

  • 节流阀

    • 防止轮播图按钮连续点击造成播放过快

    • 节流阀的目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发

    • 核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

    • 开始设置一个变量 var flag = true;

  • if(flag){flag = false do something} 关闭水龙头

    • 利用回调函数 动画执行完毕，flag = true 打开水龙头

  • 滚动窗口至文档中的特定位置

    • window.scroll(x,y) 里面的x和y 不写单位