PC端网页特效

元素偏移量offset系列

概述

offset翻译过来就是偏移量，我们是用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等

常用属性

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

offset和style的区别

元素可视区client系列

概述

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

常用属性

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

立即执行函数

(fuction(){})()或(fuction(){}())

主要作用：创建一个独立的作用域

pageshow事件

元素滚动scroll系列

概述

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

常用属性

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

• 页面被卷去的头部可以通过window.pageYOffset获得，如果是被卷去的左侧window.pageXOffset

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

• 滚动窗口至文档中的特定位置 window.scroll(x,y);x、y不用加单位

mouseenter和mouseover的区别

动画原理

动画函数封装

动画实现原理

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

实现步骤：

1. 获得盒子当前位置

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

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

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

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

<style>
    div{
        position: absolute;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
​
<div></div>
​
<script>
    var div = document.querySelector('div');
    var timer = setInterval(fuction(){
        if(div.offsetLeft >= 400){
            //停止动画，本质是停止定时器
            clearInterval(timer);
    }
        div.style.left = div.offsetLeft + 1 + 'px';
                            },30);//每30毫秒往右移动1像素，直到400像素为止
</script>

动画函数的简单封装

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

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

动画函数给不同元素声明不同定时器

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

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

<div></div>
<span></span>
<button>按钮</button>
<script>
    fuction animate(obj, target){
    //当我们不断点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
    //解决方案：让元素只有一个定时器执行
    //先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        //将var声明改成obj.timer
        obj.timer = setInterval(fuction(){
        if(obj.offsetLeft >= target){
            clearInterval(obj.timer);
    }
        obj.style.left = obj.offsetLeft + 1 + 'px';
                            },30);
    };
    var div = document.querySelector('div');
    var span = document.querySelector('span');
    var btn = document.querySelector('button');
    //调用函数
    animate(div,300);
    btn.addEventListener('click',fuction(){
        animate(span,200);                         
                         });
</script>

动画缓动效果原理

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

思路：

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

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

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

<div></div>
<span></span>
<button>按钮</button>
<script>
    fuction animate(obj, target){
        clearInterval(obj.timer);
        obj.timer = setInterval(fuction(){
            //步长值写在定时器里面
            var step = (target - obj.offsetLeft) / 10;
            //因为步长可能是正数也可能是负数
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if(obj.offsetLeft == target){
                clearInterval(obj.timer);
                    };
            obj.style.left = obj.offsetLeft + step + 'px';
                            },30);
    };
    var div = document.querySelector('div');
    var span = document.querySelector('span');
    var btn = document.querySelector('button');
    //调用函数
    animate(div,300);
    btn.addEventListener('click',fuction(){
        animate(span,200);                         
                         });
</script>

注意：

• 计算中容易出现小数，会让盒子到达不了目标位置

• 解决方法：如果步长是正数就用Math.ceil(step)向上取整，如果是负数就用Math.floor(step)向下取整

• 正数前进，负数后退

动画函数添加回调函数

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

回调函数写到定时器结束里面，调用：callback()；

<script>
    fuction animate(obj, target,callback){//添加一个形参
        clearInterval(obj.timer);
        obj.timer = setInterval(fuction(){
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if(obj.offsetLeft == target){
                clearInterval(obj.timer);
                callback();//调用，写在定时器结束里面
                    };
            obj.style.left = obj.offsetLeft + step + 'px';
                            },30);
    };
    var div = document.querySelector('div');
    var span = document.querySelector('span');
    var btn = document.querySelector('button');
    //调用函数
    animate(div,300);
    btn.addEventListener('click',fuction(){
        animate(span,200,fuction(){
        span.style.backgroundColor = 'red';//回调函数，等span盒子的位置到达200后，背景色变为红色
    });                         
                         });
</script>

手动调用事件

事件名.事件类型();

节流阀

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

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

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

if(flag){flag = false;do something}; 关闭

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