<!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. HTML5是什么？如何鉴定HTML5产品？[转]

    转自:http://www.jscode.cn/web/v62484 Html 5开始大热标志性的事件是Apple 前CEO Steve Jobs 公开炮轰Flash,并指出Flash在移动终端的不利 ...

  2. 9.10Django模板

    2018-9-10 16:37:29 模板就一个 不能嵌套 模板:  http://www.cnblogs.com/liwenzhou/p/7931828.html 2018-9-10 21:23:3 ...

  3. Nginx通过header转发

    假设添加自定义头 "my-header",当"my-header"等于test时,转发到192.168.1.113 请求如下 wget --header=&qu ...

  4. php中调用这个功能可以在web页面中显示hello world这个经典单词

    php程序写的时间长了,自然对他所提供的功能了如指掌,他所提供的一大堆功能,真是觉得很好用,但有时候会发现php也缺少一些功能,自己总是会产生为php添加一些自定义的功能的想法.久而久之,终于今天憋不 ...

  5. 洛谷P2463 Sandy的卡片【后缀数组】【二分】

    题目描述 Sandy和Sue的热衷于收集干脆面中的卡片. 然而,Sue收集卡片是因为卡片上漂亮的人物形象,而Sandy则是为了积攒卡片兑换超炫的人物模型. 每一张卡片都由一些数字进行标记,第i张卡片的 ...

  6. 2018牛客网暑期ACM多校训练营（第一场） J - Different Integers - [莫队算法]

    题目链接:https://www.nowcoder.com/acm/contest/139/J 题目描述  Given a sequence of integers a1, a2, ..., an a ...

  7. Oracle Function：COUNT

    Description The Oracle/PLSQL COUNT function returns the count of an expression. The COUNT(*) functio ...

  8. 【紫书】【重要】Not so Mobile UVA - 839 递归得漂亮

    题意:判断某个天平是否平衡,输入以递归方式给出. 题解:递归着输入,顺便将当前质量作为 &参数 维护一下,顺便再把是否平衡作为返回值传回去. 坑:最后一行不能多回车 附:天秀代码 #defin ...

  9. Oracle管理监控之rlwrap-0.37.tar.gz实现sqlplus上下翻页

    1.上传rlwrap-0.37.tar.gz到linux 2.解压rlwrap-0.37.tar.gz [root@node1 mnt]# tar zxvf rlwrap-0.37.tar.gz [r ...

  10. gateio API

    本文介绍gate io API 所有交易对 API 返回所有系统支持的交易对 URL: https://data.gateio.io/api2/1/pairs 示例: # Request GET: h ...