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

朱雀 2023-09-23 16:06 152阅读 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][]

代码示例

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .father {
                /* position: relative; */
                width: 200px;
                height: 200px;
                background-color: pink;
                margin: 150px;
            }
            
            .son {
                width: 100px;
                height: 100px;
                background-color: purple;
                margin-left: 45px;
            }
            
            .w {
                height: 200px;
                background-color: skyblue;
                margin: 0 auto 200px;
                padding: 10px;
                border: 15px solid red;
            }
        </style>
    </head>
    
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
        <div class="w"></div>
        <script>
            // offset 系列
            var father = document.querySelector('.father');
            var son = document.querySelector('.son');
            // 1.可以得到元素的偏移 位置 返回的不带单位的数值  
            console.log(father.offsetTop);
            console.log(father.offsetLeft);
            // 它以带有定位的父亲为准  如果么有父亲或者父亲没有定位 则以 body 为准
            console.log(son.offsetLeft);
            var w = document.querySelector('.w');
            // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width 
            console.log(w.offsetWidth);
            console.log(w.offsetHeight);
            // 3. 返回带有定位的父亲 否则返回的是body
            console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
            console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
        </script>
    </body>
    
    </html>

--------------------

#### 1-2 elementObj . style 和 offset 的区别 ####

![addc554e105a429ead541b6f2f0ab58e.png][]

--------------------

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

思路

![591dd229f3dc480c9fd526c4c0f2d450.png][]

代码

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

--------------------

#### 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][]

代码示例

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

![6e937b3c6f1041168991f8528e10f9cd.png][]

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

--------------------

#### 动画的缓动、变速效果 ####

变速效果

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

元素在某个位置往返运动

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

--------------------

#### 回调函数 ####

应用场景

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

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

![1a08b927ea8d48faad4afda4bc9b5b48.png][]

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

代码示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
    
            .box {
                /* 一定要有定位，才能使用left属性 */
                position: absolute;
                
                
                width: 100px;
                height: 100px;
                background-color: pink;
            }
    
            button {
                display: block;
                margin: 20px 0;
            }
        </style>
        <script>
            window.addEventListener('load',function(){
    
                //动画（封装函数）
                function animate(obj , target , f){
                    obj.times = window.setInterval(function(){
                        if(obj.offsetLeft > target){
                            window.clearInterval(obj.times);
                            //动画结束之后，再调用函数
                            f();
                        }else{
                            obj.style.left = box.offsetLeft + 1 + 'px';
                        }
                    },10)
                }
    
                //按钮
                var btn = document.querySelector('button');
                var box = document.querySelector('.box');
                btn.addEventListener('click',function(){
                    animate(box , 300 , function(){
                        //回调函数
                        alert('动完啦');
                    })
                })
    
            })
        </script>
    </head>
    <body>
        <button>动起来</button>
        <div class="box"></div>
        
        
        
        
    </body>
    </html>

--------------------

#### 把动画文件装入 js 内 ####

![fd489cb9c8234b23ac6483e598e65d9c.png][]

### | 本地存储 ###

#### 概述 ####

![b26f85c3c95b4e8595fe87b9437be08e.png][]

--------------------

#### window.sessionStorage ####

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

**特点和语法**

![9548b15dec694d47a2190ab3ebc7bc37.png][]

**代码示例** ![aa69a5a8fd0c4a318922aa0fea2827c5.png][]

--------------------

#### window.localStorage ####

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

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

![e6357d3aa3a44bfd96d431e0a0010489.png][]

**代码示例**

![0263f1c8d3cd4cb4ad8a5b86ca019a4c.png][]

--------------------

#### 案例：记住用户名 ####

思路：

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

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

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

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

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

代码：

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

[e7b3e22bcdf9436b871f1794accc456c.png]: https://img-blog.csdnimg.cn/e7b3e22bcdf9436b871f1794accc456c.png
[95b061efc2c84f949eb67aa7eb026dcd.png]: https://img-blog.csdnimg.cn/95b061efc2c84f949eb67aa7eb026dcd.png
[addc554e105a429ead541b6f2f0ab58e.png]: https://img-blog.csdnimg.cn/addc554e105a429ead541b6f2f0ab58e.png
[591dd229f3dc480c9fd526c4c0f2d450.png]: https://img-blog.csdnimg.cn/591dd229f3dc480c9fd526c4c0f2d450.png
[6fdf2aa4460f4dabb6fedda7b2978427.png]: https://img-blog.csdnimg.cn/6fdf2aa4460f4dabb6fedda7b2978427.png
[639fb5c2ba3a4323add9382434a274e7.png]: https://img-blog.csdnimg.cn/639fb5c2ba3a4323add9382434a274e7.png
[39adbbb6afea458c94ce9715e43430bf.png]: https://img-blog.csdnimg.cn/39adbbb6afea458c94ce9715e43430bf.png
[b4f746dcfff44d08a2bb4c114fc9d14c.png]: https://img-blog.csdnimg.cn/b4f746dcfff44d08a2bb4c114fc9d14c.png
[2cbb305583f34d7e872c797db71fbe65.png]: https://img-blog.csdnimg.cn/2cbb305583f34d7e872c797db71fbe65.png
[af325938bd884124955f080f62e64be7.png]: https://img-blog.csdnimg.cn/af325938bd884124955f080f62e64be7.png
[7a4e0b732fc14b68a318e30bc1816353.png]: https://img-blog.csdnimg.cn/7a4e0b732fc14b68a318e30bc1816353.png
[6b41f132db7e4d49a75ca888ae396494.png]: https://img-blog.csdnimg.cn/6b41f132db7e4d49a75ca888ae396494.png
[394504acf6db4149b4ed2574cb2da888.png]: https://img-blog.csdnimg.cn/394504acf6db4149b4ed2574cb2da888.png
[6e937b3c6f1041168991f8528e10f9cd.png]: https://img-blog.csdnimg.cn/6e937b3c6f1041168991f8528e10f9cd.png
[1a08b927ea8d48faad4afda4bc9b5b48.png]: https://img-blog.csdnimg.cn/1a08b927ea8d48faad4afda4bc9b5b48.png
[fd489cb9c8234b23ac6483e598e65d9c.png]: https://img-blog.csdnimg.cn/fd489cb9c8234b23ac6483e598e65d9c.png
[b26f85c3c95b4e8595fe87b9437be08e.png]: https://img-blog.csdnimg.cn/b26f85c3c95b4e8595fe87b9437be08e.png
[9548b15dec694d47a2190ab3ebc7bc37.png]: https://img-blog.csdnimg.cn/9548b15dec694d47a2190ab3ebc7bc37.png
[aa69a5a8fd0c4a318922aa0fea2827c5.png]: https://img-blog.csdnimg.cn/aa69a5a8fd0c4a318922aa0fea2827c5.png
[e6357d3aa3a44bfd96d431e0a0010489.png]: https://img-blog.csdnimg.cn/e6357d3aa3a44bfd96d431e0a0010489.png
[0263f1c8d3cd4cb4ad8a5b86ca019a4c.png]: https://img-blog.csdnimg.cn/0263f1c8d3cd4cb4ad8a5b86ca019a4c.png