【第五部分 | JS WebAPI】6：PC端网页特效与本地存储

朱雀 2023-09-23 16:06 253阅读 0赞

目录

| 概述

| PC端网页特效之三大系列

1-1 elementObj . offsetXXX 属性

1-2 elementObj . style 和 offset 的区别

1-3 案例：获取鼠标在某个盒子内的位置

2-1 elementObj . clientXXX 属性

3-1 elementObj . scrollXXX 属性

三大系列总结

| 动画函数封装

mouseover 和 mouseenter 的区别

动画原理

动画的缓动、变速效果

回调函数

把动画文件装入 js 内

| 本地存储

概述

window.sessionStorage

window.localStorage

案例：记住用户名

| 概述

  • 学习本章后，可以通过JS制作一些网页变化的动画、特效等
  • 案例：PC、PE端轮播图（请参考资源代码及课件）
  • 网页特效分为 PC、PE端网页特效
  • 目前这部分知识点实用性并不高，因此只做简单介绍，日后有需要再回来学

在此，仅简介一下这一章内容的目录

e7b3e22bcdf9436b871f1794accc456c.png

| PC端网页特效之三大系列

1-1 elementObj . offsetXXX 属性

作用1：获取该元素相对于【有定位的父元素】的偏移量（位置） offsetTop oddsetLeft

作用2：获取元素自身的宽度和高度 offsetWidth offsetHeight

作用3：获取有定位的父元素对象 offsetParent

语法

95b061efc2c84f949eb67aa7eb026dcd.png

代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         .father {
  16.             /* position: relative; */
  17.             width: 200px;
  18.             height: 200px;
  19.             background-color: pink;
  20.             margin: 150px;
  21.         }
  23.         .son {
  24.             width: 100px;
  25.             height: 100px;
  26.             background-color: purple;
  27.             margin-left: 45px;
  28.         }
  30.         .w {
  31.             height: 200px;
  32.             background-color: skyblue;
  33.             margin: 0 auto 200px;
  34.             padding: 10px;
  35.             border: 15px solid red;
  36.         }
  37.     </style>
  38. </head>
  40. <body>
  41.     <div class="father">
  42.         <div class="son"></div>
  43.     </div>
  44.     <div class="w"></div>
  45.     <script>
  46.         // offset 系列
  47.         var father = document.querySelector('.father');
  48.         var son = document.querySelector('.son');
  49.         // 1.可以得到元素的偏移 位置 返回的不带单位的数值  
  50.         console.log(father.offsetTop);
  51.         console.log(father.offsetLeft);
  52.         // 它以带有定位的父亲为准  如果么有父亲或者父亲没有定位 则以 body 为准
  53.         console.log(son.offsetLeft);
  54.         var w = document.querySelector('.w');
  55.         // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width 
  56.         console.log(w.offsetWidth);
  57.         console.log(w.offsetHeight);
  58.         // 3. 返回带有定位的父亲 否则返回的是body
  59.         console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
  60.         console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
  61.     </script>
  62. </body>
  64. </html>

1-2 elementObj . style 和 offset 的区别

addc554e105a429ead541b6f2f0ab58e.png

1-3 案例：获取鼠标在某个盒子内的位置

思路

591dd229f3dc480c9fd526c4c0f2d450.png

代码

  1. var box = document.querySelector('.box');
  2. box.addEventListener('mousemove', function(e) {
  3.     var x = e.pageX - this.offsetLeft;
  4.     var y = e.pageY - this.offsetTop;
  5.     this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
  6. })

2-1 elementObj . clientXXX 属性

作用1：获取【元素可视区】的相关信息。 clientTop clientLeft clientWidth clientHeight（后两个用的最多）

区别：clientWidth 、 clientHieght 和 offsetWidth、offsetHeight 的最大区别：获得的偏移量【不包含边框！！】（但是包含padding）

6fdf2aa4460f4dabb6fedda7b2978427.png

3-1 elementObj . scrollXXX 属性

作用：若内容超出了盒子，则添加overflow: auto会有滚动条。 scroll最主要的作用就是：得到被滚去的内容的距离。 因此 scrollTop scrollLeft 用的最多

639fb5c2ba3a4323add9382434a274e7.png

scrollHeight、scrollWidth、scrollTop 的区别：（红色为实际盒子大小，添加了 overflow: auto 滚动条）

39adbbb6afea458c94ce9715e43430bf.png

说明一下：scrollWidth 和 clientWidth 都能得到自身的宽度和高度，但是它们有区别

scrollHeight 返回的是自身实际的宽度：若内容超出了盒子，则会计算内容实际的高度；而clientHeight 只返回盒子本身的高度。 宽度同理

三大系列总结

  • offset、client、scroll 三大系列的作用：均可以获取自身的一些属性，并且也有自己特色的方法
  • 首先，总结一下三者获取自身属性时的区别

b4f746dcfff44d08a2bb4c114fc9d14c.png

然后，总结一下三者各自特色的方法

2cbb305583f34d7e872c797db71fbe65.png

| 动画函数封装

mouseover 和 mouseenter 的区别

af325938bd884124955f080f62e64be7.png

示例：

7a4e0b732fc14b68a318e30bc1816353.png

6b41f132db7e4d49a75ca888ae396494.png

鼠标经过粉色盒子（父盒子），触发了事件；经过紫色盒子（子盒子），没触发事件。

可以验证，若把 mouseenter 换成 mouseover，则会 鼠标经过粉色盒子（父盒子），会触发事件；经过紫色盒子（子盒子），也触发事件。

动画原理

原理

  • 通过定时器，绘制每一个关键帧，每一帧变一点点位置
  • 需要确定的有：动画移动的对象元素、以及元素要移动的终点（目标位置）
  • 注意：一定要给子元素加定位（子绝父相），否则 div.style.left = div.offsetLeft + x + ‘px’ 会报错
  • 需要注意：div.offsetLeft 得到的只是一个数值，不带单位，需要我们自己加上

394504acf6db4149b4ed2574cb2da888.png

代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .box {
  10.             /* 一定要有定位，才能使用left属性 */
  11.             position: absolute;
  13.             width: 100px;
  14.             height: 100px;
  15.             background-color: pink;
  16.         }
  17.     </style>
  18.     <script>
  19.         window.addEventListener('load',function(){
  21.             var box = document.querySelector('.box');
  22.             var time = window.setInterval(function(){
  23.                 box.style.left = box.offsetLeft + 1 + 'px';
  24.             },10)
  26.         })
  27.     </script>
  28. </head>
  29. <body>
  30.     <div class="box"></div>
  31. </body>
  32. </html>

上述代码可以封装成动画函数 animate(obj , target)

6e937b3c6f1041168991f8528e10f9cd.png

  1. <script>
  2.         // 简单动画函数封装obj目标对象 target 目标位置
  3.         function animate(obj, target) {
  4.             var timer = setInterval(function() {
  5.                 if (obj.offsetLeft >= target) {
  6.                     // 停止动画 本质是停止定时器
  7.                     clearInterval(timer);
  8.                 }
  9.                 obj.style.left = obj.offsetLeft + 1 + 'px';
  11.             }, 30);
  12.         }
  14.         var div = document.querySelector('div');
  15.         var span = document.querySelector('span');
  16.         // 调用函数
  17.         animate(div, 300);
  18.         animate(span, 200);
  19.     </script>

上述函数，可以优化一下，利用【JS的对象可以动态添加属性】这一特点，省去了因声明计数器而导致的内存占用

  1. <script>
  2.         // 简单动画函数封装obj目标对象 target 目标位置
  3.         function animate(obj, target) {
  4.              //把 var times 改为 obj.times 动态添加属性
  5.             obj.times = setInterval(function() {
  6.                 if (obj.offsetLeft >= target) {
  7.                     // 停止动画 本质是停止定时器
  8.                     clearInterval(timer);
  9.                 }
  10.                 obj.style.left = obj.offsetLeft + 1 + 'px';
  12.             }, 30);
  13.         }
  15.         var div = document.querySelector('div');
  16.         var span = document.querySelector('span');
  17.         // 调用函数
  18.         animate(div, 300);
  19.         animate(span, 200);
  20.     </script>

动画的缓动、变速效果

变速效果

  • 关键在于我们每一次 obj.style.left = XXX 的表达式是如何设置的
  • 比如运动越来越慢的表达式： obj.style.left = obj.offsetLeft + (target - obj.offsetLeft) / 10
  • 更多公式请去百度

元素在某个位置往返运动

  • 添加 if 判断，如果大于某个位置则 obj.style.left 减少，反之则增加

回调函数

应用场景

有时候想让动画（即计时器）结束之后，再执行某些函数

方法：关键代码：定义函数f，然后作为参数传入animate封装动画函数，当动画结束的时候 再在结束的方法内调用函数

1a08b927ea8d48faad4afda4bc9b5b48.png

  1. //动画（封装函数）
  2.             //关键代码：定义函数f，然后作为参数传入animate封装动画函数，当动画结束的时候 再在结束的方法内调用函数
  3.             function animate(obj , target , f){
  4.                 obj.times = window.setInterval(function(){
  5.                     if(obj.offsetLeft > target){
  6.                         window.clearInterval(obj.times);
  7.                         //动画结束之后，再调用函数
  8.                         f();
  9.                     }else{
  10.                         obj.style.left = box.offsetLeft + 1 + 'px';
  11.                     }
  12.                 },10)
  13.             }

代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  10.         .box {
  11.             /* 一定要有定位，才能使用left属性 */
  12.             position: absolute;
  15.             width: 100px;
  16.             height: 100px;
  17.             background-color: pink;
  18.         }
  20.         button {
  21.             display: block;
  22.             margin: 20px 0;
  23.         }
  24.     </style>
  25.     <script>
  26.         window.addEventListener('load',function(){
  28.             //动画（封装函数）
  29.             function animate(obj , target , f){
  30.                 obj.times = window.setInterval(function(){
  31.                     if(obj.offsetLeft > target){
  32.                         window.clearInterval(obj.times);
  33.                         //动画结束之后，再调用函数
  34.                         f();
  35.                     }else{
  36.                         obj.style.left = box.offsetLeft + 1 + 'px';
  37.                     }
  38.                 },10)
  39.             }
  41.             //按钮
  42.             var btn = document.querySelector('button');
  43.             var box = document.querySelector('.box');
  44.             btn.addEventListener('click',function(){
  45.                 animate(box , 300 , function(){
  46.                     //回调函数
  47.                     alert('动完啦');
  48.                 })
  49.             })
  51.         })
  52.     </script>
  53. </head>
  54. <body>
  55.     <button>动起来</button>
  56.     <div class="box"></div>
  61. </body>
  62. </html>

把动画文件装入 js 内

fd489cb9c8234b23ac6483e598e65d9c.png

| 本地存储

概述

b26f85c3c95b4e8595fe87b9437be08e.png

window.sessionStorage

数据会被存放在当前窗口，只要不关闭，则数据都会存在（如刷新等，数据也不会消失）

特点和语法

9548b15dec694d47a2190ab3ebc7bc37.png

代码示例 aa69a5a8fd0c4a318922aa0fea2827c5.png

window.localStorage

数据会被永久保存在用户本地浏览器中，除非手动删除，否则无论是刷新、关闭页面，数据都会保留

需要注意：这个数据是保存在浏览器中，只在同一浏览器中才共享。若用户换了浏览器，则数据就无法获取啦

e6357d3aa3a44bfd96d431e0a0010489.png

代码示例

0263f1c8d3cd4cb4ad8a5b86ca019a4c.png

案例：记住用户名

思路：

① 把数据存起来，用到本地存储

② 关闭页面，也可以显示用户名，所以用到localStorage

③ 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框

④ 当复选框发生改变的时候 change事件

⑤ 如果勾选，就存储，否则就移除

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
  13.     <script>
  14.         var username = document.querySelector('#username');
  15.         var remember = document.querySelector('#remember');
  16.         //页面进入的时候自动执行。如果已经存储了用户数据，则执行这个代码
  17.         if (localStorage.getItem('username')) {
  18.             username.value = localStorage.getItem('username');
  19.             remember.checked = true;
  20.         }
  21.         //如果用户点击了复选框，则进行判断：用户是取消”记住“，还是勾选”记住“
  22.         remember.addEventListener('change', function() {
  23.             if (this.checked) {
  24.                 localStorage.setItem('username', username.value)
  25.             } else {
  26.                 localStorage.removeItem('username');
  27.             }
  28.         })
  29.     </script>
  30. </body>

发表评论

表情：
评论列表 （有 0 条评论，253人围观）

还没有评论，来说两句吧...

相关阅读

    相关 PC端网页特效

    元素偏移量offset 动态得到相关元素的位置、大小 1.获得元素距离带有定位的父元素的位置 2.获得元素自身的大小 返回的数值都不带单位 offsetT

    快来打我*快来打我*/ 0 赞/ 138 阅读

    相关 7. PC端网页特效

    声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址： 1. H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教

    深藏阁楼爱情的钟深藏阁楼爱情的钟/ 0 赞/ 323 阅读