<!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. nginx配置虚拟主机之不同端口和不同IP地址

    配置nginx虚拟主机不同端口和不同ip地址,和上编nginx基于域名配置虚拟主机博文类似,请先参考. zxl.com域名不同端口,配置文件内容如下: 1 2 3 4 5 6 7 8 9 10 11 ...

  2. Nodejs express、html5实现拖拽上传

    一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs ...

  3. TOP100summit 2017：投资千亿成立达摩院，揭秘阿里在人工智能领域的探索

    今天上午,阿里巴巴云栖大会在杭州开幕,第一条重磅消息是阿里首席技术官张建锋宣布成立达摩院,在全球各地建立实验室,3年内投入千亿在全球建立实验室.和高校建立研究所.建立全球研究中心等事务. 该院由全球实 ...

  4. Ubuntu：/etc/rc.local 可执行权限问题

    VmWare 11.1.2 安装Ubuntu 12.04系列版本, /etc/rc.local 有可执行权限. 安装Ubuntu 14.04系列版本,发现 /etc/rc.local 没有可执行权限, ...

  5. Oracle HA 之 Server Pool 实战

    --创建server pool的两种方式:    图形界面:console和dbca       演示-略    命令行工具:srvctl和crsctl --srvctl和crsctl创建server ...

  6. Python高阶函数：map、reduece、filter

    笔记中函数简介: map函数:遍历序列,对序列中每个元素进行操作,最终获取新的序列. reduce函数:对于序列内所有元素进行累计操作. filter函数:对于序列中的元素进行筛选,最终获取符合条件的 ...

  7. uboot 下更改NAND的分区 fdisk

    uboot 下更改NAND的分区 fdisk 分类: S5PXX(三星)2012-07-01 18:59 8946人阅读 评论(7) 收藏 举报 flash平台cacheandroid三星null 关 ...

  8. gitlab svlogd runsv 基于Rotated Log的日志统计

    小结: 1. 日志轮询 log roate 日志文件自动转存和重命名 2. rotated log独立于其他模块,可以以静态库或者动态库的形式支持二次开发: 3. [root@d1 ~]# gitla ...

  9. ArcGIS URL 组成

    转自帮助文档:http://server.arcgis.com/zh-cn/server/latest/administer/windows/components-of-arcgis-urls.htm ...

  10. (转)Spring实现IoC的多种方式

    原文地址:http://www.cnblogs.com/best/p/5727935.html 目录 一.使用XML配置的方式实现IOC 二.使用Spring注解配置IOC 三.自动装配 四.零配置实 ...