首页 > 其他分享 >816笔记(动画)

816笔记(动画)

时间:2022-08-16 23:14:51浏览次数:53  
标签:function 动画 定时器 obj 笔记 var document 816

三大系列总结

element.offsetWidth  返回自身包括padding,边框,内容区的宽度,返回值不带单位
element.clientWidth  返回自身包括padding,内容区的宽度,不含边框,返回值不带单位
element.scrollWidth  返回自身实际的宽度,(padding占了就会算),不含边框,返回值不带单位

offset 用于获取元素的位置 offsetLeft offsetTop
client 用于获取元素的大小 clientWidth clientHeight
scroll 用于获取滚动的距离 scrollTop scrollLeft
页面滚动的距离 window.pageXOffset  window.pageYOffset

仿淘宝固定侧边栏

<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 slidebar = document.querySelector('.slider-bar')
        var bar = document.querySelector('.banner')
        // banner.offsetTop banner元素距离body顶部的距离 要写到滚动的外面
        var bannerTop = banner.offsetTop
        // console.log(bannerTop)
        // 侧边栏固定定位之后应该变化的值
        var slidebarTop = sliderbar.offsetTop = bannerTop
        // console.log(slidebar.offsetTop)
        //获取main主体
        var main = document.querySelector('.main')
        var goBack = document.querySelector('.goBack')
        var mainTop = main.offsetTop
        // 页面滚动事件scroll
        document.addEventListener('scroll', function () {
            //window.pageYOffset    页面被卷走的高度   
            // 区别:element.scrollTop是元素被卷去的头部,不是页面
            //当我们页面被卷去的头部大于等于170 bannertop 侧边栏就要改为固定定位
            if (window.pageYOffset >= bannerTop) {
                slidebar.style.position = 'fixed'
                slidebar.style.top = slidebarTop
            } else {
                slidebar.style.position = 'absolute'
            }
            //当页面滚动到main盒子时,就显示goback
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block'
            } else {
                goBack.style.display = 'none'
            }
        })
    </script>

动画

实现原理

根据定时器setinterval()不断移动盒子位置

步骤:

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

分装匀速运动动画函数

    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

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

<body>
    <div></div>
    <span>span</span>
    <script>
        //简单动画函数分装
        // 首先要有个目标对象obj  目标位置target time毫秒值
        function animate(obj, target, time) {
            var timer = setInterval(function () {
                if (oDiv.offsetLeft >= target) {
                    //停止定时器,停止动画
                    clearInterval(timer)
                }
                //匀速动画
                obj.style.left = obj.offsetLeft + 1 + 'px', time
            })
        }
        var oDiv = document.querySelector('div')
        animate(oDiv, 300, 50)
        var oSpan = document.querySelector('span')
        animate(oSpan, 300, 20)
    </script>

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

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

原理:我们可以很方便的给当前的对象添加属性

    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

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

<body>
    <button>按钮</button>
    <div></div>
    <span>span</span>
    <script>

        function animate(obj, target, time) {
            var timer = setInterval(function () {
                if (oDiv.offsetLeft >= target) {
                    //停止定时器,停止动画
                    clearInterval(timer)
                }
                //匀速动画
                obj.style.left = obj.offsetLeft + 1 + 'px', time
            })
        }
        var oBtn = document.querySelector('button')
        var oDiv = document.querySelector('div')
        oBtn.onclick = function () {
            animate(oDiv, 500, 30)
        }
    </script>
    <script>
        function animate(obj, target, time) {
            //当我们不断地点击按钮,元素的速度会越来越快,因为我们开启了太多的定时器
            // 解决方案 让元素只有一个定时器执行
            // 先清除以前的定时器,只保留当前的一个定时器执行
            clearInterval(obj.timer)
            obj.timer = setInterval(function () {
                if (obj.offsetLeft >= target) {
                    //停止定时器,停止动画
                    clearInterval(obj.timer)
                }
                //匀速动画
                obj.style.left = obj.offsetLeft + 1 + 'px', time
            })
        }
        var oBtn = document.querySelector('button')
        var oDiv = document.querySelector('div')
        oBtn.onclick = function () {
            animate(oDiv, 500, 30)
        }
    </script>

缓动动画

实现原理

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

步骤

  • 让盒子每次移动的距离慢慢变小,速度就会慢慢停下来
  • 核心算法:(目标值-现在的位置)/10作为每次移动的距离步长
  • 停止条件:让当前盒子位置等于目标位置就停止定时器
  • 步长值要取整
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

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

<body>
    <button>按钮</button>
    <div></div>
    <span>span</span>
    <script>
        function animate(obj, target) {
            clearInterval(obj.timer)
            obj.timer = setInterval(function () {
                //步长要写在定时器里面
                var step = (target - obj.offsetLeft) / 10
                //把每次加1这个步长值改为一个慢慢变小的值
                obj.style.left = obj.offsetLeft + step + 'px'
                if (obj.offsetLeft = target) {
                    //停止定时器,停止动画
                    clearInterval(obj.timer)
                }
            }, 30)
        }
        var oBtn = document.querySelector('button')
        var oDiv = document.querySelector('div')
        oBtn.addEventListener('click', function () {
            animate(oDiv, 500)
        })
        //匀速动画 盒子当前的位置+固定的值 1px
        //缓动动画 盒子当前的位置+变化的值(目标值-现在的位置)/10
    </script>

动画函数在多个目标值之间移动

可以让动画函数从800移动到500,还可以从500移动到800

步长可能是正值,也可能是负值

  • 是正值,步长就往大取整
  • 是负值,步长就往小取整
    <button>点击800</button>
    <button>点击500</button>
    <script>
        function animate(obj, target) {
            clearInterval(obj.timer)
            obj.timer = setInterval(function () {
                //步长要写在定时器里面
                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 oBtn = document.querySelector('button')
        var oDiv = document.querySelector('div')
        oBtn.addEventListener('click', function () {
            animate(oDiv, 800)
        })
        oBtn.addEventListener('click', function () {
            animate(oDiv, 500)
        })
    </script>

动画函数添加回调函数

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

回调函数写的位置就是定时器结束的位置。

    <button>点击800</button>
    <button>点击500</button>
    <script>
        function animate(obj, target, callback) {
            //callback=function(){}
            clearInterval(obj.timer)
            obj.timer = setInterval(function () {
                //步长要写在定时器里面
                var step = (target - obj.offsetLeft) / 10
                //步长可能是正值,也可能是负值 把步长值改为整数,不要出现小数问题
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                if (obj.offsetLeft === target) {
                    //停止定时器,停止动画
                    clearInterval(obj.timer)

                    //动画结束之后我们要做一些操作
                    // 就在定时器结束后使用回调函数
                    // 回调函数
                }
                if (callback) {
                    //调用函数
                    callback()
                }
                obj.style.left = obj.offsetLeft + step + 'px'
            }, 30)
        }
        var oBtn = document.querySelector('button')
        var oDiv = document.querySelector('div')
        oBtn.addEventListener('click', function () {
            animate(oDiv, 800, function () {
                alert(123)
            })
        })

        oBtn.addEventListener('click', function () {
            animate(oDiv, 500, function () {
                alert(234)
            })
        })
    </script>

标签:function,动画,定时器,obj,笔记,var,document,816
From: https://www.cnblogs.com/mengxiaoye/p/16593338.html

相关文章

  • 2022-08-16 第六小组 高佳誉 学习笔记
    DQL数据库查询语言重点,DQL是我们每天都要接触编写最多也是最难的SQL,该语言用来查询记录,不会修改数据库和表结构。构建数据库创建一张student表:DROPTABLEIFEXISTSst......
  • 20220816 第一组 于芮 数据库查询(第三十二天)
     小白成长记——第三十二天   今天是学数据库的第二天,学习的内容比昨天要稍微难一点,但是还是很好理解的,知识量很大,需要记忆的很多,很考验脑容量,但是还是要认真学习......
  • DW组队学习——深入浅出PyTorch笔记
    本篇是针对DataWhale组队学习项目——深入浅出PyTorch而整理的学习笔记。由于水平实在有限,不免产生谬误,欢迎读者多多批评指正。安装PyTorch安装Anaconda这里为了避免手......
  • 2022-08 田龙跃 数据库学习笔记
    Mysql数据库5.7约束无法使用枚举是数据类型数据库数据库【按照数据结构来组织、存储和管理数据的仓库】。是一个长期存储在计算机内的、有组织的、可共享的、统一管......
  • 【总结笔记】设计模式
    工厂模式介绍https://zhuanlan.zhihu.com/p/83535678工厂模式利用C++多态的特性,将存在继承关系的类,通过一个工厂类创建对应的子类对象。工厂模式可分别实现为简单工厂......
  • Kubernetes学习笔记(八):kubectl apply原理
    本地的yaml配置文件会转换成json格式的文件kubectlapply会对本地配置文件、最后一次apply的配置文件(Json)和实时对象配置文件进行对比,当本地配置文件更新后也会同时......
  • #C220816C. 时间复杂度
    #C220816C.时间复杂度C220816C校内模拟赛背景注意:本题采用捆绑测试。题目描述在你的帮助下,小凯成功找到了宝藏价值最大的方案。接下来他在闲逛时被一个游戏机吸引了......
  • #C220816B. 小凯的疑惑
    #C220816B.小凯的疑惑C220816B(校内模拟赛)背景注意:本题采用捆绑测试。题目描述小凯正在玩一个寻宝游戏。总共有\(n\)个不同的藏宝地点,共\(n-1\)条道路把这些地点......
  • mysql学习笔记 0816
    单表查询查询所有列:select*from表名;select*fromstudent;查询指定的列:selectid,`name`,age,genderfromstudent;selectid,`name`,agefromstudent;补充:......
  • 2022-08-16 第二小组 张鑫 实训笔记
    实训三十八天1.学习重点1.单表查询2.分组查询3.分页查询4.多表查询2.学习心得今天主要学习了数据库最重要的一块知识:DQL查询语句,通过学习我了解了很多曾经在学校没......