首页 > 其他分享 >动画函数封装

动画函数封装

时间:2022-11-14 17:47:08浏览次数:47  
标签:动画 定时器 封装 函数 var obj div left

动画函数封装

1.动画实现原理

核心原理∶通过定时器setlnterval)不断移动盒子位置。

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

<style>
        div {
        /* 注意:一定要添加定位 */
            position: absolute;
            top: 0;
            left: 0;
            height: 100px;
            width: 100px;
            background-color: skyblue;
        }
</style>
<div>第一个盒子,到400时停下</div>
    <script>
        // 1.获得盒子当前位置
        // 2.让盒子在当前位置加上1个移动距离
        // 3.利用定时器不断重复这个操作
        // 4.加一个结束定时器的条件
        // 5.注意此元素需要添加定位,才能使用element.style.left
        var div = document.querySelector('div');
        var timer = setInterval(function() {
            if (div.offsetLeft >= 400) {
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 5 + 'px';
        }, 30);
    </script>

2.动画函数简单封装

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

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

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

 <style>
        div {
            /* 注意:一定要添加定位 */
            position: absolute;
            left: 0px;
            height: 100px;
            width: 100px;
            background-color: skyblue;
        }
        
        span {
            position: absolute;
            top: 150px;
            left: 0;
            display: block;
            height: 100px;
            width: 100px;
            background-color: orange;
        }
    </style>
<button>让第二个盒子开始移动</button>
    <div>第一个盒子,到400时停下</div>
    <span>第二个盒子,到300时停下</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(timer);
                }
                obj.style.left = obj.offsetLeft + 5 + 'px';
            }, 30);
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn = document.querySelector('button');
        // 调用函数
        animate(div, 400);
        btn.addEventListener('click', function() {
            animate(span, 300);
        })
    </script>

标签:动画,定时器,封装,函数,var,obj,div,left
From: https://www.cnblogs.com/chichi0002/p/16889732.html

相关文章

  • 内联函数的探究
    内联函数的引入内联函数简单来说就是空间换时间,它会把函数的执行块内容替换(搬)到发在函数的调用位置执行,但是不发生函数调用,从而我们的代码量会增加,但是会没有函数调用所需......
  • 激活函数---->反向传播----》更新参数----》初始化
    神经元包含了非线性计算,用g()来表示,非线性计算由激活函数来实现,激活函数统一表示成g(z),常见的激活函数:1、sigmoid函数如果神经元采用sigmoid函数作为激活函数,那么单个神经元......
  • 巨蟒python全栈开发-第12天 生成器函数 各种推导式 yield from
    一.今日主要内容总览(重点)1.生成器(目的:帮助我们创建对象)(1)生成器的本质就是迭代器(2)一个一个的创建对象(3)创建生成器的方式:1.生成器函数......
  • 密码学C/C++语言实现学习笔记——基本运算函数
    密码学C/C++语言实现学习笔记——基本运算函数基础数据结构:typedefunsignedshortclint;typedefunsignedlongclintd;书中所使用环境unsignedshort是16位(2......
  • 函数式编程-Lambda表达式
    函数式编程-Stream流1.概述1.1为什么学?能够看懂公司里的代码大数量下处理集合效率高代码可读性高消灭嵌套地狱##############################################......
  • C++中sort函数、1.4最长公共子串
    sort()即为用来排序的函数,它根据具体情况使用不同的排序方法,效率较高。sort在实现时避免了经典快速排序中可能出现的会导致实际复杂度退化到O(n2)的极端情况。使用sort()......
  • react项目--路由封装
    importReact,{lazy}from"react";importHomefrom"../views/Home";importLoginfrom"@/views/Login";constPage1=lazy(()=>import("../views/Page1"));......
  • C基础学习笔记——01-C基础第07天(字符串处理函数和函数)
    在学习C基础总结了笔记,并分享出来。01-C基础第07天(字符串处理函数和函数)目录:一、字符串处理函数(1)gets()(2)fgets()(3)puts()(4)fputs()(5)strlen()(6)strcpy()(7)strncpy()(8)strcat()(9)str......
  • react项目--redux封装
    index.ts1conststore={2state:{3num:20,4},5actions:{6//放同步的代码7add1(newState:{num:number},action:{t......
  • python量化指标计算talib函数功能一览表
    安装talib库:pipinstalltalib 1#取个数据验证一下2set_token('')3data=history(symbol='SHSE.600519',frequency='1d',start_time='2015-01-01',......