PC端网页特效

Posted 2020-11-23 fengzi759

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了PC端网页特效相关的知识，希望对你有一定的参考价值。

元素偏移量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改变

元素可视区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添加

元素滚动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

三大系列总结

三大系列大小对比	作用
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

mouseenter和mouseover的区别
- mouseenter鼠标事件
  - 当鼠标移动到元素上时就会触发mouseenter事件
  - 类似mouseover，它们两者之间的差别是
    - mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。
    - mouseenter只会经过自身盒子才会触发
    - 自身盒子就是绑定事件的盒子
    - 之所以这样，mouseenter不会冒泡
  - 跟mouseenter搭配鼠标离开 mouseleave同样不会冒泡
动画函数封装(重点)
- 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 不写单位

以上是关于PC端网页特效的主要内容，如果未能解决你的问题，请参考以下文章

PC端访问WAP页面时自动跳转到PC版网页需要啥代码？

PC 端网页特效-offset 系列及学习案例

PC 端网页特效 2-client & scroll 学习

根据当前设备环境来做pc端和手机端网页显示

PC端网页特效

PC 端网页特效