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

单个属性

<!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. 如何高效读写百万级的Excel?

    高效读取百万级数据 接上一篇介绍的高效写文件之后,最近抽时间研究了下Excel文件的读取.概括来讲,poi读取excel有两种方式:用户模式和事件模式. 然而很多业务场景中的读取Excel仍然采用用户 ...

  2. kafka streams

    https://docs.confluent.io/current/streams/concepts.html#ktable

  3. GIS服务器开发资源文档

    JAVA开发gis后台服务可以参照此文学习,持续跟新... 几何基础类库 代表: JTS(Java), GEOS(C++), Shapely(Python) JTS封装了点.线等等对象   数据源实现 ...

  4. Ubuntu 16.04安装VMware-Workstation-12

    1.下载: https://download3.vmware.com/software/wkst/file/VMware-Workstation-Full-12.1.1-3770994.x86_64. ...

  5. MYSQL常用的性能指标

    (1) QPS(每秒Query量) QPS = Questions(or Queries) / seconds mysql > show  global status like 'Questio ...

  6. centos6.2安装kvm虚拟机

    http://www.wenzizone.com/2012/03/06/centos_6-2_install_kvm.html KVM虚拟机简介 kernel-based Virtual Machin ...

  7. [Vue @Component] Place Content in Components with Vue Slots

    Vue's slots enable you to define where content of a component should land when you define the conten ...

  8. android学习笔记(9)android程序调试学习

    相应若水老师的第十四课 一,Log日志输出 Log.v(tag,message);        //verbose模式,打印最具体的日志  Log.d(tag,message);        // ...

  9. load函数

    load函数的作用 1.load函数的作用是,从server获取数据,而且把数据放到指定的元素(通常是div元素)中. 2.说的再具体一些就是,把获取到的数据插入到当前文档的某个div元素中. ser ...

  10. 如何使用PHP显示在线Word文档

    在线生成FlashPaper文档 1 安装 FlashPaper2,最好下载绿色版的FlashPaper软件,如下所示,先点击初始化.bat即开始绿化,然后双击"FlashPrinter.e ...