在知道如何获取内嵌式和外链式的标签属性值之后，我们再次封装缓慢动画：

单个属性

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        div {

            position: absolute;

            width: 100px;

            height: 100px;

            background-color: pink;

        }

    </style>

</head>

<body>

<button>运动到400</button>

<button>宽度变为400</button>

<div></div>

<script>

    var btnArr = document.getElementsByTagName("button");

    var div = document.getElementsByTagName("div")[0];

    btnArr[0].onclick = function () {

        animate(div, "left", 400);

    }

    btnArr[1].onclick = function () {

        animate(div, "width", 400);

    }

    //参数变为3个

    function animate(ele, attr, target) {

        //先清定时器

        clearInterval(ele.timer);

        ele.timer = setInterval(function () {

            //四部

            var leader = parseInt(getStyle(ele, attr)) || 0;//获取值可能含有px，我们只取数字部分parseInt()

            //1.获取步长

            var step = (target - leader) / 10;

            //2.二次加工步长

            step = step > 0 ? Math.ceil(step) : Math.floor(step);

            leader = leader + step;

            //3.赋值

            ele.style[attr] = leader + "px";

            //4.清除定时器

            if (Math.abs(target - leader) <= Math.abs(step)) {

                ele.style[attr] = target + "px";

                clearInterval(ele.timer);

            }

        }, 25);

    }

    //兼容方法获取元素样式

    function getStyle(ele, attr) {

        if (window.getComputedStyle) {

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

        }

        return ele.currentStyle[attr];

    }

</script>

</body>

</html>

多个属性

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        div {

            position: absolute;

            top: 40px;

            left: 0px;

            width: 100px;

            height: 100px;

            background-color: pink;

        }

    </style>

</head>

<body>

<button>运动到400</button>

<div></div>

<script>

    var btnArr = document.getElementsByTagName("button");

    var div = document.getElementsByTagName("div")[0];

    btnArr[0].onclick = function () {

        var json = {"left": 100, "top": 200, "width": 300, "height": 200};

        animate(div, json);

    }

    //参数变为2个，将属性atrr和值都存储到json中

    function animate(ele, json) {

        //先清定时器

        clearInterval(ele.timer);

        ele.timer = setInterval(function () {

            //开闭原则

            var bool = true;

            //遍历属性和值，分别单独处理json

            //attr == k(键)    target == json[k](值)

            for (var k in json) {

                //四部

                var leader = parseInt(getStyle(ele, k)) || 0;

                //1.获取步长

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

                //2.二次加工步长

                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                leader = leader + step;

                //3.赋值

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

                //4.清除定时器

                //判断: 目标值和当前值的差大于步长，就不能跳出循环

                //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。

                // if (json[k] !== leader) {

                //     bool = false;

                // }

                if (Math.abs(json[k] - leader) > Math.abs(step)) {

                    bool = false;

                }

            }

            console.log(1);

            //只有所有的属性都到了指定位置，bool值才不会变成false；

            if (bool) {

                for (k in json) {

                    ele.style[k] = json[k] + "px";

                }

                clearInterval(ele.timer);

            }

        }, 25);

    }

    //兼容方法获取元素样式

    function getStyle(ele, attr) {

        if (window.getComputedStyle) {

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

        }

        return ele.currentStyle[attr];

    }

</script>

</body>

</html>

回调函数

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        div {

            position: absolute;

            top: 40px;

            left: 0px;

            width: 100px;

            height: 100px;

            background-color: pink;

        }

    </style>

</head>

<body>

<button>运动到400</button>

<div></div>

<script>

    var btnArr = document.getElementsByTagName("button");

    var div = document.getElementsByTagName("div")[0];

    btnArr[0].onclick = function () {

        var json1 = {"left": 100, "top": 200, "width": 300, "height": 200};

        var json2 = {"left": 0, "top": 40, "width": 100, "height": 100};

        animate(div, json1, function () {

            animate(div, json2);

        });

    }

    //参数变为2个，将属性atrr和值都存储到json中

    function animate(ele, json, fn) {

        //先清定时器

        clearInterval(ele.timer);

        ele.timer = setInterval(function () {

            //开闭原则

            var bool = true;

            //遍历属性和值，分别单独处理json

            //attr == k(键)    target == json[k](值)

            for (var k in json) {

                //四部

                var leader = parseInt(getStyle(ele, k)) || 0;

                //1.获取步长

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

                //2.二次加工步长

                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                leader = leader + step;

                //3.赋值

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

                //4.清除定时器

                //判断: 目标值和当前值的差大于步长，就不能跳出循环

                //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。

                // if (json[k] !== leader) {

                //     bool = false;

                // }

                if (Math.abs(json[k] - leader) > Math.abs(step)) {

                    bool = false;

                }

            }

            console.log(1);

            //只有所有的属性都到了指定位置，bool值才不会变成false；

            if (bool) {

                for (k in json) {

                    ele.style[k] = json[k] + "px";

                }

                clearInterval(ele.timer);

                //所有程序执行完毕之后执行回调函数

                //现在只有传递了回调函数，才能执行

                if (fn) {

                    fn();

                }

            }

        }, 25);

    }

    //兼容方法获取元素样式

    function getStyle(ele, attr) {

        if (window.getComputedStyle) {

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

        }

        return ele.currentStyle[attr];

    }

</script>

</body>

</html>

JS——缓慢动画封装的更多相关文章

  1. JS——缓慢动画封装案例

    手风琴 1.排他思想 2.ul宽度需要大一点,防止li撑开跑下去 3.一个变大其他所有变小,变小不能太小,不然会出现空白 <!DOCTYPE html> <html lang=&qu ...

  2. 【转】第7篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：全自动注册与反射方法分析

    作者: 牛A与牛C之间 时间: 2013-12-12 分类: 技术文章 | 2条评论 | 编辑文章 主页 » 技术文章 » 第7篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  3. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  4. js运动动画

    原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...

  5. 使用WebGL + Three.js制作动画场景

    使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...

  6. JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  7. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  8. js双层动画幻灯

    js双层动画幻灯 点击下载

  9. JS类的封装及实现代码

    js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 1. ...

随机推荐

  1. [Usaco2016 Open]Diamond Collector

    题目描述 Bessie the cow, always a fan of shiny objects, has taken up a hobby of mining diamonds in her s ...

  2. Keywords Search AC自动机

    In the modern time, Search engine came into the life of everybody like Google, Baidu, etc. Wiskey al ...

  3. centos忘了root用户密码

    centos5.5启动时,按“空格”,到出现系统菜单GNU GRUB 第二步:按“e”进入编辑此GRUB界面 第三步:选择“rhgb quiet”此行,再按“e”进入编辑界面,在rhgb quiet后 ...

  4. 最老程序猿创业开发实训1---Android应用架构之MVC

    我们都知道Android中基本组件是Activity,每一个界面都是一个Activity,自从2.3版本号開始.又添加了Fragment组件,提供了适应于各种屏幕方法.可是因为Android系统仅仅是 ...

  5. HR系统-人员申请单

    部门在人员缺失时,须要进行人员申请, 申请会涉及到单据的建立及审核.单据建立界面例如以下:

  6. ＭyBatis 中#{}与${}绑定参数的区别

    MyBatis 中#{}与${}绑定参数的区别: #{}将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #{id},如果传入的值是111,那么解析成sql时的值为o ...

  7. 操作系统的时区设置会影响数据库查询SYSDATE和SYSTIMESTAMP的值

    SYSDATE和SYSTIMESTAMP的值并不受数据库參数DBTIMEZONE的影响,操作系统时区的环境变量(如TZ)会影响它们的输入,由于SYSDATE和SYSTIMESTAMP实际是调用操作系统 ...

  8. oracle 存储过程使用动态sql

    Oracle存储过程使用动态SQL 有两种写法:用 DBMS_SQL 或 execute immediate,建议使用后者. DDL和DML (注意DDL中可以用拼接字符串的方法用来create ta ...

  9. JSP-Runoob：JSP 自动刷新

    ylbtech-JSP-Runoob:JSP 自动刷新 1.返回顶部 1. JSP 自动刷新 想象一下,如果要直播比赛的比分,或股票市场的实时状态,或当前的外汇配给,该怎么实现呢?显然,要实现这种实时 ...

  10. 在datagrid中的toolbar添加输入框

    转自:https://blog.csdn.net/u013178480/article/details/72358551 <code class="language-html" ...