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

单个属性

<!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. jsp内置对象(转)

    JSP中一共预先定义了9个这样的对象,分别为:request.response.session.application.out.pagecontext.config.page.exception 1. ...

  2. Linux command2

    . CentOS 想查看哪个port开了,却提示命令无效 # yum -y install net-tools 2. How to install "wget" command i ...

  3. java实现WebService 以及客户端不同的调用方式

    java 实现WebService 以及不同的调用方式 webservice:    就是应用程序之间跨语言的调用    wwww.webxml.com.cn    1.xml    2.    ws ...

  4. 函数操作(this操作)

    1.apply/call函数:会改变this关键字,并且第一个参数作为this关键字. /*apply与call区别*/ console.log(Array.prototype.join.call([ ...

  5. [C++] 自己主动关闭右下角弹窗

    近期腾讯.迅雷等各种client,都越发喜欢在屏幕的右下角弹框了. 有骨气的人当然能够把这些软件卸载了事,可是这些client在某些情况下却又还是实用的.怎么办呢? 作为码农,自己实现一个自己主动关闭 ...

  6. nginx安装【windows下安装】

    http://nginx.org/en/download.html 解压: 2.启动nginx 有很多种方法启动nginx (1)直接双击nginx.exe,双击后一个黑色的弹窗一闪而过[不是失败就是 ...

  7. Pell Sequence

    /* * PellSequence.cpp * * Created on: 2013-09-08 16:46 * Author: lg * Description: a1 = 1, a2 = 2, . ...

  8. Selenium在Jenkins中的配置

    //  Goals and options -Dmode="" -DuseGrid="true" -Dhub=${Hub} -DbrowserType=${Br ...

  9. PCB WebAPI跨域访问 实现方式

    我们写WebAPI不仅自己系统调用,也需要给其它系统调用,那么如何实现跨域访问了,在这里介绍2种方法实现 方法一.修改Web.Config文件   实现 此方法是全局实现跨域,如果仅想某个方法实现跨域 ...

  10. gulp的使用安装

    gulp安装:用cnpm的时候把npm换成cnpm就好了. npm install -g gulp(全局安装,安装一次就好) npm install --save-dev gulp(安装到项目目录下, ...