4.1 PC端网页特效

1.元素偏移量offset系列

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

1675231972943

1675241149113

offset和style的区别

2.元素可视区client系列

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

1675239794976

1675239828731

2.1立即执行函数

不需要调用，能够立马自己执行。

作用：创建一个独立的作用域。避免了命名冲突问题

写法：

(function() {
    
    })()  
//或者
(function(){
    
    }())
//例：
(function(a,b){
    
    
    console.log(a+b);
})(1,2);//3

(function(a,b){
    
    
    console(a+b);
}(2,3));//5

3.元素滚动scroll系列

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

1675240821386

1675241103281

4.三大系列总结

他们主要用法：

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

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

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

4.注意页面滚动的距离通过 window.pageXOffset 获得

5. mouseenter和mouseover的区别

5.1mouseenter鼠标事件

当鼠标移动到元素上时就会触发 mouseenter 事件
类似 mouseover，它们两者之间的差别是：mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发
之所以这样，就是因为mouseenter不会冒泡
跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

6.动画函数封装

6.1动画实现原理

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

实现步骤：

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

6.2动画函数简单封装

两个参数：动画对象、移动到的距离。

 function animate(obj, target) {
    
    
            var timer = setInterval(function() {
    
    
                if (obj.offsetLeft >= target) {
    
    
                    // 停止动画 本质是停止定时器
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }

6.3缓动效果原理

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

思路：

让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离步长
停止的条件是：让当前盒子位置等于目标位置就停止定时器
注意步长值需要取整

6.4节流阀

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

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

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

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

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

//利用回调函数 动画执行完毕，
 flag = true

4.2 移动端网页特效

1.触屏事件

1675245503233

div.addEventListener('touchstart',function(e){
    
    
	var x=e.touches;
})

1.2触摸事件对象(TouchEvent)

1675245554240

4.3 ClassList类名操作

//追加类名，不覆盖
div.classList.add('three');
//获取类名，多个类名存入伪数组
div.classList[0];
//移除类名
div.classList.remove('three');
//切换 比如 点击添加，再点删除，再点添加…
div.classList.toggle('one');

4.4 本地存储

本地存储特性

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage约5M、localStorage约20M

4、只能存储字符串，可以将对象JSON.stringify() 编码后存储

1. window.sessionStorage

1.生命周期为关闭浏览器窗口（刷新不会消失）

2.在同一个窗口(页面)下数据可以共享

3.以键值对的形式存储使用

//存储数据
sessionStorage.setItem(key, value)
//获取数据
sessionStorage.getItem(key)
//删除数据
sessionStorage.removeItem(key)
//删除所有数据
sessionStorage.clear()

2. window.localStorage

声明周期永久生效，除非手动删除否则关闭页面也会存在。
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

//存储数据
localStorage.setItem(key, value)
//获取数据：
localStorage.getItem(key)
//删除数据
localStorage.removeItem(key)
//删除所有数据
localStorage.clear()

4-JS其他

目录