<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        #box {

            width: 100px;

            height: 100px;

            background-color: greenyellow;

            position: absolute;

        }

    </style>

</head>

<body>

<input type="button" value="按钮" id="btn"/>

<div id="box"></div>

<script>

    var btn = document.getElementById("btn");

    btn.onclick = function () {

        animate(box, {"height": 400, "width": 400, "borderRadius": 150, "left": 100, "top": 100}, function () {

            animate(box, {"height": 200, "width": 100, "borderRadius": 20, "left": 200, "top": 50}, function () {

                animate(box, {"height": 100, "width": 200, "borderRadius": 100, "left": 400, "top": 400})

            })

        })

    }

    function animate(obj, json, fn) {

        clearInterval(obj.timer);

        obj.timer = setInterval(function () {

            var isTrue = true;

            for (var k in json) {//{k:json[k]}

                var leader = parseInt(getAttr(obj, k)) || 0;//如果是nan的话，给一个默认值

                var step = (json[k] - leader) / 10;

                step = step > 0 ? Math.ceil(step) : Math.floor(step);//做一个判断，当step>0的时候，向上取整，保证至少为一；<0的时候，向下取整，保证至少为-1

                leader = leader + step;

                obj.style[k] = leader + "px";

                console.log("代码还在执行");

                if (leader != json[k]) {

                    isTrue = false;

                }

            }

            if (isTrue) {

                clearInterval(obj.timer);

                if (fn) {

                    fn();

                }

            }

        }, 15);

    }

    function getAttr(demo, attr) {

        if (window.getComputedStyle) {

            return window.getComputedStyle(demo, null)[attr];

        } else {

            return demo.currentStyle[attr];

        }

    }

</script>

</body>

</html>

使用原生的javascript封装动画函数(有callback功能)的更多相关文章

  1. JS---案例：移动元素，封装动画函数

    案例:移动元素,封装动画函数 1. div要移动,要脱离文档流---position:absolute 2. 如果样式的代码是在style的标签中设置,外面是获取不到 3. 如果样式的代码是在styl ...

  2. JavaScript封装一个函数效果类似内置方法concat()

    JavaScript封装一个函数效果类似内置方法concat() 首先回忆concat()的作用: concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个 ...

  3. 原生javascript封装的函数

    1.javascript 加载的函数 window.onload = function(){} 2.封装的id函数 function $(id) { return document.getElemen ...

  4. javascript 自定义动画函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  5. Javascript之回调函数（callback）

    1.回调函数定义: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方 ...

  6. 原生javascript 基础动画函数封装(二)

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  7. 原生javascript 基础动画函数封装(一)

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  8. javascript封装的函数

    /*获取一个指定长度随机数*/ csdn.random = function (len) { if (!len) len = 5; var r = Math.random().toString(); ...

  9. js原生实现链式动画效果

    // 1. css样式 div { width: 100px; height: 100px; background: olivedrab; position: absolute; left: 0px; ...

随机推荐

  1. [CentOS_7.4]Linux安装与网络配置

    一 安装 官网下载ISO安装文件:https://www.centos.org/download/ 然后自行安装. 二 配置网络 a.配置动态ip 1 2 3 1)# vi /etc/sysconfi ...

  2. Query实例的ajax应用之二级联动的后台是采用php来做的

    jQuery实例的ajax应用之二级联动的后台是采用php来做的,前台通过jquery的ajax方式实现二级联动数据库表设计 csj_trade id int(11) auto_increment  ...

  3. Vim多行编辑

    vim编辑文档有时候需要多行同时插入或者删除,比如多行加注释应该怎么操作 vim进了多行编辑模式:<ESC>之后按CTRL+V进入visual block模式(列编辑). 光标移到某行行首 ...

  4. zero-shor learning 数据集

    OSR数据集下载地址: http://people.csail.mit.edu/torralba/code/spatialenvelope/ Relative Attributes Marr Priz ...

  5. Django模板的加深

    网站模板的设计,一般的,都有一些通用的设计,有导航.底部.统计等相关代码:nav.html.bottom.html.tongji.html 在我前面Django工程的基础上建立一个base.html包 ...

  6. The Unique MST POJ - 1679 最小生成树判重

    题意:求一个无向图的最小生成树,如果有多个最优解,输出"Not Unique!" 题解: 考虑kruskal碰到权值相同的边: 假设点3通过边(1,3)连入当前所维护的并查集s. ...

  7. Oracle安装部署之dbca静默建库和删除库

    dbca查看帮助: [oracle@wen ~]$ dbca -help 1).运行静默建库语句 [oracle@wen ~]$ dbca -silent -cloneTemplate -gdbNam ...

  8. linux下的vdso与vsyscall

      传统的系统调用是怎样的?    —— int 0x80的时代 .... :通过寄存器传参 mov $n ,eax :将系统调用号放到eax中 int 0x80 sysenter/sysexit的出 ...

  9. python xlwt 设置单元格样式-合并单元格

    xlwt模块详解--合并单元格 import xlwtworkbook = xlwt.Workbook()worksheet = workbook.add_sheet('My sheet')# 合并第 ...

  10. Spring Data JPA(官方文档翻译)

    关于本书 介绍 关于这本指南 第一章 前言 第二章 新增及注意点 第三章 项目依赖 第四章 使用Spring Data Repositories 4.1 核心概念 4.2 查询方法 4.3 定义rep ...