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

单个属性

<!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. git远程上传文件

    [第一步]建立先仓库 第一步的话看一般的提示就知道了,在github新建一个repository(谷歌可以解决),都是可视化的界面操作,所以难度不大.或者看这里:https://help.github ...

  2. 洛谷—— P3811 【模板】乘法逆元

    https://www.luogu.org/problem/show?pid=3811 题目背景 这是一道模板题 题目描述 给定n,p求1~n中所有整数在模p意义下的乘法逆元. 输入输出格式 输入格式 ...

  3. Oracle Multitenant Environment (二) Purpose

    Purpose of a Multitenant Environment A multitenant environment enables the central management of mul ...

  4. mybatis中的map.xml文件中sql语句需要分号吗？

    mybatis中的map.xml文件中sql语句需要分号吗? :你是说sql介绍的分号吗?不需要的

  5. Android Studio 开发利器【经常使用插件】

    1.ADB Idea ADB操作快捷菜单.高速清除数据,重新启动应用,卸载应用等 快捷键: Windows: Ctrl+Alt+Shift+A Mac OSX: Ctrl+Shift+A 当然,你能够 ...

  6. 改动grub默认启动顺序

    grub如今有两个版本号,一个grub,一个grub2,两个版本号的操作不太一样. 装centos的朋友非常有可能是grub.我电脑装的是ubuntu14.04,为grub2.我演示grub2的过程. ...

  7. BZOJ 1798: [Ahoi2009]Seq 维护序列seq （线段树乘法加法的混合操作）

     题目:点击打开链接 大意:一个数组.三个操作.第一种是区间[a,b]每一个数乘乘,另外一种是区间[a,b]每一个数加c,第三种是查询[a,b]区间的和并对p取摸. 两种操作就不能简单的仅仅往下传 ...

  8. Java 定时任务之Quartz

    使用CronTrigger CronTrigger 能够提供比 SimpleTrigger 更有具体实际意义的调度方案,调度规则基于 Cron 表达式,CronTrigger 支持日历相关的重复时间间 ...

  9. 继承自TWinControl的控件不能在设计期间接受子控件，用代码设置子控件却可以（它的自绘是直接改写PaintWindow虚函数，而不是覆盖Paint函数——对TWinControl.WMPaint又有新解了）

    这个控件直接继承自TWinControl,因此不是改写Paint;函数,而是直接改写PaintWindow虚函数,它在VCL框架里被直接调用,直接就把自己画好了(不用走给控件Perform(WM_Pa ...

  10. SQL 2005批量插入数据的二种方法

    SQL 2005批量插入数据的二种方法 Posted on 2010-07-22 18:13 moss_tan_jun 阅读(2635) 评论(2) 编辑 收藏 在SQL Server 中插入一条数据 ...