<!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. DBCP连接池配置(DBCPUtils.java)

    配置文件 db_dbcp.properites driverClass=com.mysql.jdbc.Driver url=jdbc:mysql://127.0.0.1:3306/db?useSSL= ...

  2. Oracle数据库查询表信息/列信息(列ID/列名/数据类型/长度/精度/是否可以为null/默认值/是否自增/是否是主键/列描述)

    查询表信息(表名/表描述) Select table_Name As Name,Comments As Value From User_Tab_Comments Where table_Type='T ...

  3. JQuery EasyUI 日期控件 怎样做到只显示年月，而不显示日

    标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ======== ...

  4. 替换{0}为指定的字符串(MessageFormat)

    package com.text; import java.text.MessageFormat; /**替换{0}为指定的字符串*/ public class MessageFormatTest { ...

  5. 使用Maven导出项目依赖的jar包

    步骤1.进入项目目录(有pom.xml的目录) 2.创建存放导出jar依赖包的目录 3.地址栏输入cmd,回车 4.输入导出命令,回车mvn dependency:copy-dependencies  ...

  6. JZ2440裸板烧写（打补丁）

    制作uImage,需要上网下载内核+patch补丁 1.将内核用ftp发送到 打补丁patch -p1 < ../补丁文件名 打补丁文件(目录) 2.配置 :复制cp  configuratio ...

  7. A Simple Problem with Integers---poj3468线段树

    http://poj.org/problem?id=3468   题意:有一个比较长的区间可能是100000.长度, 每个点都有一个值(值还比较大), 现在有一些操作: C a b c, 把区间a-- ...

  8. mysql 数据类型 目录

    mysql 数据类型 mysql 整数类型 数值类型 tinyint mysql int 整数类型 解释显示宽度 和 存储宽度 mysql float 浮点型 mysql 日期类型 mysql 字符串 ...

  9. 003-Nginx 设置Header 获取真实IP

    1.X-Forwarded-For的定义: X-Forwarded-For:简称XFF头,它代表客户端,也就是HTTP的请求端真实的IP,只有在通过了HTTP 代理或者负载均衡服务器时才会添加该项.它 ...

  10. win10 问题:你没有权限在此位置中保存文件。请与管理员联系以获得相应权限。

    https://jingyan.baidu.com/album/b24f6c8207f09886bee5da4a.html?picindex=2 归根结底就是通过点击文件夹的属性,在安全选项处,修改操 ...