BOM动画函数封装

最新推荐文章于 2022-04-10 13:27:27 发布

FG.

最新推荐文章于 2022-04-10 13:27:27 发布

阅读量328

点赞数 2

分类专栏： Web APIs 文章标签：动画 javascript css3

本文链接：https://blog.csdn.net/weixin_54418006/article/details/122505189

版权

Web APIs 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1. 动画实现原理(加定位)

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

2. 动画函数简单封装

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

3.动画函数给不同元素记录不同定时器

如果多个元素都使用这个动画函数，每次都需要var声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用对自己的定时器）。
核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性。

<!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></title>
    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span {
            position: absolute;
            left: 0;
            top: 150px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button>点击</button>
    <div></div>
    <span></span>
    <script>
        //var obj = {};
        //obj.name = 'andy';
        //简单动画函数封装obj目标对象 target目标设置
        //给不同的元素指定了不同的定时器
        function animate(obj, target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                if (obj.offsetLeft >= target) {
                    //停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 30);
        }
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        //调用函数
        animate(div, 300);
        btn.addEventListener('click', function () {
            animate(span, 200);
        })
    </script>
</body>

</html>

在这里插入图片描述

4. 缓动动画

原理：

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

注意：
让动画函数从800移动到500，当我们点击按钮时，判断步长是正值还是负值

如果是正值，则步长往大取整（Math.ceil()）
如果是负值，则步长往小取整（Math.floor()）

5.回调函数

回调函数写到定时器里面

6.动画函数封装单独放到JS文件里面

<!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>
        .sliderbar {
            position: fixed;
            right: 0;
            bottom: 100px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            color: #fff;
        }

        .con {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 40px;
            background-color: purple;
            z-index: -1;
        }
    </style>
    <script src="animate.js"></script>
</head>

<body>
    <div class="sliderbar">
        <span>←</span>
        <div class="con">问题反馈</div>
    </div>
    <script>
        var sliderbar = document.querySelector('.sliderbar');
        var con = document.querySelector('.con');
        //当我们鼠标经过 sliderbar 就会让con这个盒子滑动到左侧
        //当我们鼠标离开 sliderbar 就会让con这个盒子滑动到右侧
        sliderbar.addEventListener('mouseenter', function () {
            animate(con, -160, function () {
                //当动画执行完毕，就把 ← 改为 →
                sliderbar.children[0].innerHTML = '→';
            });
        })
        sliderbar.addEventListener('mouseleave', function () {
            animate(con, 0, function () {
                sliderbar.children[0].innerHTML = '←';
            });
        })
    </script>
</body>

</html>

在这里插入图片描述

7. 节流阀

防止轮播图按钮连续点击造成播放过快。
节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
开始设置一个变量 var flag = true;
if (flag) {flag = false; do something} 关闭水龙头
利用回调函数动画执行完毕， flag = true; 打开水龙头

案例：返回顶部页面缓慢移动上去

<!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></title>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }

        span {
            display: none;
            position: absolute;
            bottom: 0;
            cursor: pointer;
        }

        .w {
            width: 1200px;
            margin: 10px auto;
        }

        .header {
            height: 150px;
            background-color: purple;
        }

        .banner {
            height: 250px;
            background-color: skyblue;
        }

        .main {
            height: 1000px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
    <script>
        //1.获取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offsetTop就是被卷去头部的大小 一定要写在滚动的外面
        var bannerTop = banner.offsetTop;
        // 当我们侧边栏固定定位之后应该变化的数值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        //获取main 主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        //2.页面滚动事件 scroll
        document.addEventListener('scroll', function () {
            //console.log(11);
            //window.pageYOffset 页面被卷去的部分
            //console.log(window.pageYOffset);
            //3.当我们页面被卷去的头部大于等于bannerTop，侧边栏就变为固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            //4.当我们页面滚动到main盒子时，就显示goBack模块
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
        })
        //3.当我们点击了返回顶部模块，就让窗口滚动到页面最上端
        goBack.addEventListener('click', function () {
            //里面的x和y不加单位px
            //window.scroll(0, 0);
            //对象是window
            animate(window, 0);
        });
        //动画函数
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                //步长值写到定时器里面
                //把步长值改为整数 不要出现小数的问题
                //var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - window.pageYOffset) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (window.pageYOffset == target) {
                    //停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                    //回调函数写到定时器结束里面
                    //if (callback) {
                    //    callback();
                    //}
                    callback && callback();
                }
                //把每次加1 这个步长值改为一个慢慢变小的值
                //obj.style.left = obj.offsetLeft + step + 'px';
                window.scroll(0, window.pageYOffset + step);
            }, 15);
        }
    </script>
</body>

</html>

筋斗云案例

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background-color: skyblue;
        }

        .c-nav {
            width: 900px;
            height: 42px;
            background: #fff url(rss.png) no-repeat right center;
            margin: 100px auto;
            border-radius: 5px;
            position: relative;
        }

        .c-nav ul {
            position: absolute;
        }

        .c-nav li {
            float: left;
            width: 83px;
            text-align: center;
            line-height: 42px;
        }

        .c-nav li a {
            color: #333;
            text-decoration: none;
            display: inline-block;
            height: 42px;
        }

        .c-nav li a:hover {
            color: white;
        }

        .c-nav li.current a {
            color: #0dff1d;
        }

        .cloud {
            position: absolute;
            left: 0;
            top: 0;
            width: 83px;
            height: 42px;
            background: url(cloud.gif) no-repeat;
        }
    </style>
    <script src="animate.js"></script>
    <script>
        window.addEventListener('load', function () {
            // 1. 获取元素
            var cloud = document.querySelector('.cloud');
            var c_nav = document.querySelector('.c-nav');
            var lis = c_nav.querySelectorAll('li');
            // 2. 给所有的小li绑定事件 
            // 这个current 做为筋斗云的起始位置
            var current = 0;
            for (var i = 0; i < lis.length; i++) {
                // (1) 鼠标经过把当前小li 的位置做为目标值
                lis[i].addEventListener('mouseenter', function () {
                    animate(cloud, this.offsetLeft);
                });
                // (2) 鼠标离开就回到起始的位置 
                lis[i].addEventListener('mouseleave', function () {
                    animate(cloud, current);
                });
                // (3) 当我们鼠标点击，就把当前位置做为目标值
                lis[i].addEventListener('click', function () {
                    current = this.offsetLeft;
                });
            }
        })
    </script>
</head>

<body>
    <div id="c_nav" class="c-nav">
        <span class="cloud"></span>
        <ul>
            <li class="current"><a href="#">首页新闻</a></li>
            <li><a href="#">师资力量</a></li>
            <li><a href="#">活动策划</a></li>
            <li><a href="#">企业文化</a></li>
            <li><a href="#">招聘信息</a></li>
            <li><a href="#">公司简介</a></li>
            <li><a href="#">我是佩奇</a></li>
            <li><a href="#">啥是佩奇</a></li>
        </ul>
    </div>
</body>

</html>

筋斗云会跟着鼠标移动，鼠标离开就回到第一个位置。
在这里插入图片描述

FG.

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
BOM动画函数封装

1. 动画实现原理(加定位)核心原理：通过定时器 setInterval() 不断移动盒子位置。2. 动画函数简单封装注意函数需要传递2个参数，动画对象和移动到的距离。3.动画函数给不同元素记录不同定时器如果多个元素都使用这个动画函数，每次都需要var声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用对自己的定时器）。核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性。<!DOCTYPE html><html lang="en"><h
复制链接

扫一扫