<!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. iOS - WKWebView那些坑

    WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件,用以替代 UIKit 中笨重难用.内存泄漏的 UIWebView.WKWebView 拥有60fps滚动刷新率. ...

  2. Twig---的使用

    使用Twig的参考文档: https://www.kancloud.cn/yunye/twig-cn/159454 Twig是一款灵活.快速.安全的PHP模板引擎. 示例: <?php echo ...

  3. C++基础知识之动态库静态库

    一. 静态库与动态库 库(library),一般是一种可执行的二进制格式,被操作系统载入内存执行. 我们通常把一些公用函数制作成函数库,供其它程序使用.函数库分为静态库和动态库 静态库和动态库区别: ...

  4. 5 Tips for Building a Winning DevOps Culture

    对于企业来说,前途未卜的改变往往很难发生,就像航海一样,重复的往往是久经验证的安全航线,这点在DevOps文化的构建上同样如此.近日,CA Technologies的高级策略师Peter Waterh ...

  5. CentOS 7设置Samba共享目录

    1. 安装Samba服务 yum -y install samba # 查看yum源中Samba版本 yum list | grep samba # 查看samba的安装情况 rpm -qa | gr ...

  6. 洛谷P2577 [ZJOI2005]午餐 dp

    正解:序列dp 解题报告: 传送门! 这题首先要想到一个显然的贪心:每个窗口的排队顺序都是按照吃饭时间从大到小排序的 证明如下: 这种贪心通常都是用微扰法,这题也不例外 现在假如已经确定了每个窗口有哪 ...

  7. CH0201 费解的开关 枚举

    正解:枚举 解题报告: 入门傻逼题,思维难度不高代码量极小,非常适合上手 然后傻逼的我第二次看这道题的时候依然没想到解法:D 没有办法,就想着写个笔记好歹记录一下以后多复习几次就记着了趴qwq 就是, ...

  8. pyqt5 主界面打开新主界面、打开Dialog、打开提示框的实现模板

    import sys from PyQt5.QtWidgets import * from PyQt5.QtCore import * from PyQt5.QtGui import * ###### ...

  9. oracle(七)索引

    一.B-Tree索引 (1). 选择索引字段的原则: 在WHERE子句中最频繁使用的字段 联接语句中的联接字段 选择高选择性的字段(如果很少的字段拥有相同值,即有很多独特值,则选择性很好) Oracl ...

  10. 包含.h就可以用其对应的函数

    //callee.h 被调用者 #pragma once void display(); //展示函数 //callee.cpp 被调用者 #include "callee.h" ...