pink老师有点意思~

学习目录：

元素偏移量 offset 系列
元素可视区 client 系列
元素滚动 scroll 系列
动画函数封装
常见网页特效案例

1. 元素偏移量 offset 系列

1.1 offset 概述

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

获取元素距离带有定位父元素的位置
获得元素自身大小（宽度高度）
注意：返回数值都不带单位

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

1.2 offset 和 style 区别

offset	style
offset 可以得到任意样式表中的样式值	style 只能得到行内样式表中的样式值
offset 系列获得的是数值是没有单位的	style.width 获得的是带有单位的字符串
offsetWidth 包含padding + border + width	style.width 获得不包含padding和border的值
offsetWidth 等属性是只读属性，只能获取不能赋值	style.width 是可读属性，可以获取也可以赋值
所以，我们想要获取元素大小位置，用offset更合适	所以.我们想要给元素更改值，则需要用style改变

2. 元素可视区 client 系列

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

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

2.1 client，style.width，offsetWidth的栗子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            padding: 20px;
            border: 5px saddlebrown solid;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div style="width: 200px;"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.offsetWidth);
        console.log(div.style.width);
        console.log(div.clientWidth);
    </script>
</body>

</html>

2.2 flexible.js 源码分析

3. 元素 scroll 系列属性

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

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

<body>
    <div style="
        width: 200px;
        height: 200px;
        overflow: auto;">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit voluptatibus quos distinctio similique eius sed natus reprehenderit. Tempore, tempora odio vel molestias deleniti praesentium quam sapiente rem temporibus, eos nemo in esse dicta similique.
        Iusto blanditiis impedit, facilis neque optio sit. Neque ab fugiat ad magnam dolore quod atque exercitationem incidunt fugit! Ea reiciendis odio possimus impedit quo dolorem tenetur voluptatem vero ab tempore, recusandae dolor ut magnam, in atque
        vitae saepe sapiente doloribus explicabo aspernatur deleniti. Natus vel, cum temporibus quo deleniti praesentium. Expedita corporis similique, at dignissimos beatae, tempora unde iure, consequatur sunt sit quaerat enim? Dolorem, consequuntur.</div>
    <script>
        var div = document.querySelector('div');
        console.log(div.scrollHeight);
        console.log(div.clientTop);
        div.addEventListener('scroll', function() {
            console.log(div.scrollTop);
        })
    </script>
</body>

3.1案例淘宝固定侧边栏

总结：三大系列的区别

在这里插入图片描述

他们主要用法：

offset系列，经常用于获得元素位置： offsetLeft offsetTop
client经常用于获取元素大小：clientWidth、 clientHeight
scroll经常用于获取滚动距离：scrollTop、scrollLeft
注意页面滚动的距离通过：window.pageXOffset获得

4. 动画函数封装

4.1 动画实现原理

核心原理：通过定时器setinterval()不断移动盒子的位置
现实步骤：

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        var timer = setInterval(move, 30);

        function move() {
            if (div.offsetLeft >= 400) {
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 + 'px';
        }
    </script>
</body>

</html>

4.2 简单动画封装

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            display: block;
            position: absolute;
            left: 0;
            width: 10px;
            height: 20px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        // 目标对象 目标位置
        function animation(obj, target) {
            var timer = setInterval(move, 30);

            function move() {
                if (obj.offsetLeft >= target) {
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }
        }


        animation(span, 300);
        animation(div, 200);
    </script>
</body>

</html>

4.3 优化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            display: block;
            position: absolute;
            left: 0;
            width: 10px;
            height: 20px;
            background-color: aqua;
        }
        
        button {
            z-index: 1;
            display: block;
            background-color: red;
            position: absolute;
            top: 200px;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <button>夏雨荷</button>
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn = document.querySelector('button');
        var obj = {};
        // 目标对象 目标位置
        btn.addEventListener('click', function() {
            animation(span, 300);
            animation(div, 200);
        })

        function animation(obj, target) {
            clearInterval(obj.timer); /* 让每次只有一个定时器 */
            if (obj.offsetLeft >= target) {/* 避免到达指定位置后点击后移 */
                return;
            } else {
                obj.timer = setInterval(move, 30);
                // 1. 不占内存   2. 避免命名冲突
                function move() {
                    if (obj.offsetLeft >= target) {
                        clearInterval(obj.timer);
                    }
                    obj.style.left = obj.offsetLeft + 1 + 'px';
                }
            }

        }
    </script>
</body>

</html>

4.4 缓动效果原理

缓动效果就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：

让盒子每次移动的距离慢慢变小，速度就会慢慢落下
核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离步长
停止条件：到指定位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            display: block;
            position: absolute;
            left: 0;
            width: 10px;
            height: 20px;
            background-color: aqua;
        }
        
        button {
            z-index: 1;
            display: block;
            background-color: red;
            position: absolute;
            top: 200px;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <button>夏雨荷</button>
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn = document.querySelector('button');
        var obj = {};
        // 目标对象 目标位置
        btn.addEventListener('click', function() {
            animation(span, 300);
            // animation(div, 200);
        })

        function animation(obj, target) {
            clearInterval(obj.timer); /* 让每次只有一个定时器 */
            if (obj.offsetLeft >= target) { /* 避免到达指定位置后点击后移 */

            } else {
                obj.timer = setInterval(move, 30);
                // 1. 不占内存   2. 避免命名冲突
                function move() {
                    if (obj.offsetLeft == target) {
                        clearInterval(obj.timer);
                    }
                    var step = (target - obj.offsetLeft) / 10;
                    obj.style.left = obj.offsetLeft + step + 'px';
                }
            }
        }
    </script>
</body>

</html>

4.5 前后缓动效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            display: block;
            position: absolute;
            left: 0;
            width: 10px;
            height: 20px;
            background-color: aqua;
        }
        
        button {
            z-index: 1;
            display: block;
            background-color: red;
            position: absolute;
            top: 200px;
        }
        
        .button800 {
            top: 230px;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <button class="button500">夏雨荷</button>
    <button class="button800">马什么梅</button>
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.button500');
        var btn800 = document.querySelector('.button800');
        var obj = {};
        // 目标对象 目标位置
        btn500.addEventListener('click', function() {
            animation(span, 500);
        })
        btn800.addEventListener('click', function() {
            animation(span, 800);
        })

        function animation(obj, target) {
            clearInterval(obj.timer); /* 让每次只有一个定时器 */
            obj.timer = setInterval(move, 30);
            // 1. 不占内存   2. 避免命名冲突
            function move() {
                /* 将目标值取整 */
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step); /* key */

                console.log(target - obj.offsetLeft);

                obj.style.left = obj.offsetLeft + step + 'px';
            }
        }
    </script>
</body>

</html>

4.6 缓动动画添加回调函数

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            display: block;
            position: absolute;
            left: 0;
            width: 10px;
            height: 20px;
            background-color: aqua;
        }
        
        button {
            z-index: 1;
            display: block;
            background-color: red;
            position: absolute;
            top: 200px;
        }
        
        .button800 {
            top: 230px;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <button class="button500">夏雨荷</button>
    <button class="button800">马什么梅</button>
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.button500');
        var btn800 = document.querySelector('.button800');
        var obj = {};
        // 目标对象 目标位置
        btn500.addEventListener('click', function() {
            animation(span, 500, function() {});
        })
        btn800.addEventListener('click', function() {
            animation(span, 800, function() {
                // alert('帅')
                div.style.backgroundColor = 'green';
            });
        })


        function animation(obj, target, callback) {
            clearInterval(obj.timer); /* 让每次只有一个定时器 */
            obj.timer = setInterval(move, 30);
            // 1. 不占内存   2. 避免命名冲突
            function move() {
                /* 将目标值取整 */
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step); /* key */


                obj.style.left = obj.offsetLeft + step + 'px';
                if (target == obj.offsetLeft) {
                    clearInterval(obj.timer);
                    if (callback) {
                        callback();
                    }
                }
            }
        }
    </script>
</body>

</html>

4.7 动画函数封装到单独的JS文件里面

因为以后经常使用这个动画函数，可以单独封装到一个JS文件里面，使用的时候引用这个JS文件即可

animate.js链接

节流阀

防止轮播图按钮连续点击造成播放过快
节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

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

 if(flag){
 	flag = false;
 	dosomething
 }
 (关闭水龙头)

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

PC端网页特效学习目标（作为学习笔记）

pink老师有点意思~

学习目录：

1. 元素偏移量 offset 系列

1.1 offset 概述

1.2 offset 和 style 区别

2. 元素可视区 client 系列

2.1 client，style.width，offsetWidth的栗子

2.2 flexible.js 源码分析

3. 元素 scroll 系列属性

3.1案例淘宝固定侧边栏

总结：三大系列的区别

4. 动画函数封装

4.1 动画实现原理

4.2 简单动画封装

4.3 优化

4.4 缓动效果原理

4.5 前后缓动效果

4.6 缓动动画添加回调函数

4.7 动画函数封装到单独的JS文件里面

节流阀

猜你喜欢

PC端网页特效学习目标（作为学习笔记）

pink老师有点意思~

学习目录：

1. 元素偏移量 offset 系列

1.1 offset 概述

1.2 offset 和 style 区别

2. 元素可视区 client 系列

2.1 client，style.width，offsetWidth的栗子

2.2 flexible.js 源码分析

3. 元素 scroll 系列属性

3.1案例 淘宝固定侧边栏

总结： 三大系列的区别

4. 动画函数封装

4.1 动画实现原理

4.2 简单动画封装

4.3 优化

4.4 缓动效果原理

4.5 前后缓动效果

4.6 缓动动画添加回调函数

4.7 动画函数封装到单独的JS文件里面

节流阀

猜你喜欢

3.1案例淘宝固定侧边栏

总结：三大系列的区别