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

单个属性

<!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. 在JQuery中$(document.body)和这个$("body") 这两的区别在哪里？

    两种写法代表的是同一个对象 $("body") 是一个选择器,jQuery 会从 DOM 顶端开始搜索,直到找到标签为 body 的元素. 而 $(document.body) 中 ...

  2. 【Teamviewer】Teamviewer远程访问工具使用方法

    首先电脑必须能访问外网,即使是在局域网内也无所谓. 1.这里以非自动登录.自动受控的方式为例.首先,让对方也安装一个Teamviewer,或运行一个绿色的Teamviewer,并保证网络可通.然后我们 ...

  3. oracle 12c 初步操作

    查看是否为cdb SQL> select name,cdb,open_mode,con_id from v$database; NAME CDB OPEN_MODE CON_ID ------- ...

  4. installshield中的installscript编程

    上一篇说道了InstallShield高速建立一个打包程序,如今说说InstallShield里面的installscript脚本. 该文属于个人理解.參考一些相关文章. 相关资料下载地址:http: ...

  5. javascript 数组总结

    数组的创建: 数组可以使用Array构造函数来创建,或者使用[]快速创建. 1. Array构造函数创建数组: 无参数,创建空数组: var arry = new Array(); 参数为一个数字,指 ...

  6. NSDate 格式化 及 互转

    /* NSDateFormatter的作用 1.NSString -> NSDate 2.NSDate -> NSString */ void fmt_date_to_string(); ...

  7. 查找两个大文件（1G以上）的相同内容PHP版

    这是是一个大文件处理,面试官出题的意图并不希望你两层for循环进行遍历,这种答案肯定是不会要的! 这道题目的解法思路是: 顺序读取两个文件的的全部记录 将每条记录经过hash->转换为10进制- ...

  8. Bitmap通过getWidth和getHeight获取尺寸不符

    在使用BitmapFactory载入图片时,常会出现这样的情况,返回的图片尺寸与实际尺寸不符.这是因为我们把图片资源放到res/drawable文件路径下时,选择的文件不同所致.不同的目录会有不同的缩 ...

  9. USACO zerosum DFS 1A

    USER: Kevin Samuel [kevin_s1] TASK: zerosum LANG: C++ Compiling... Compile: OK Executing... Test 1: ...

  10. 快学Scala习题解答—第十章 特质

    10 特质 10.1 java.awt.Rectangle类有两个非常实用的方法translate和grow,但可惜的是像java.awt.geom.Ellipse2D这种类没有. 在Scala中,你 ...