obj是将要运动的对象，json是运动完成时的位移结果。

封装要点：

　　1.定时器开关flag的定义要放在for in结构的外面，否则，每遍历一次，都会定义一个 新的flag

　　2.if(current != json[attr]) {     flag = false;  }要放到遍历的里面，因为定时器每运行一次，都要判断一下是否到达终点

　　3.if(flag == false) {clearInterval(obj.timer)}放到遍历结构的外面，当所有的位移都达到json给的数值的时候，才关闭定时器。否则，只有一个json[attr]达到位移终点时，定时器就会关闭，此时，可能别的位移还没有到达json数据给的终点。

    function animate(obj,json){

		clearInterval(obj.timer);

		var flag = true;

		obj.timer = setInterval(function (){

			for (var attr in json) {

				// var current = parseInt(getCss(obj,attribute))

				// getCss(obj,attr)中的attr是从json中获取到的，因此不能用attribution了

				var current = parseInt(getCss(obj,attr));

				var step = (json[attr] - current) /10;

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

				// obj.style[attr] = parseInt(getCss(obj,attr)) + step + 'px' ;

				obj.style[attr] = current + step + 'px' ;

				if(current != json[attr]) {

					flag = false;

				}

			}

		},30);

		if(flag == false) {clearInterval(obj.timer)}

	}

　　案例

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: pink;

            position: absolute;

            left: 0;

            opacity: 0.3;

        }

    </style>

</head>

<body>

<button id="btn200">200</button>

<button id="btn400">400</button>

<div id="box"></div>

</body>

</html>

<script>

    var btn200 = document.getElementById("btn200");

    var btn400 = document.getElementById("btn400");

    var box = document.getElementById("box");

    btn200.onclick = function() {

        animate(box,{top: 300,height:200,width : 600});

    }

    btn400.onclick = function() {

        animate(box,{top: 100,height:500,width : 300});

    }

    function animate(obj,json){

		clearInterval(obj.timer);

		var flag = true;

		obj.timer = setInterval(function (){

			for (var attr in json) {

				// var current = parseInt(getCss(obj,attribute))

				// getCss(obj,attr)中的attr是从json中获取到的，因此不能用attribution了

				var current = parseInt(getCss(obj,attr));

				var step = (json[attr] - current) /10;

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

				// obj.style[attr] = parseInt(getCss(obj,attr)) + step + 'px' ;

				obj.style[attr] = current + step + 'px' ;

				if(current != json[attr]) {

					flag = false;

				}

			}

		},30);

		if(flag == false) {clearInterval(obj.timer)}

	}

	function getCss(obj,attribute) {

		if(obj.currentStyle) {

			return obj.currentStyle[attribute];}else {

		return window.getComputedStyle(obj,null)[attribute];}

	}

</script>

　　

模拟CSS3 多组位移运动属性的框架封装的更多相关文章

  1. CSS3中transform几个属性值的注意点

    transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...

  2. CSS3让文本自动换行——word-break属性

    1.依靠浏览器让文本自动换行 浏览器本身都自带着让文本自动换行的功能. 2.指定自动换行的处理方法 在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法. div{ word-b ...

  3. CSS3中和动画有关的属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform     从字面来看transform的释义为 ...

  4. JZOJ 4273. 【NOIP2015模拟10.28B组】圣章-精灵使的魔法语

    4273. [NOIP2015模拟10.28B组]圣章-精灵使的魔法语 (File IO): input:elf.in output:elf.out Time Limits: 1000 ms  Mem ...

  5. JZOJ 3509. 【NOIP2013模拟11.5B组】倒霉的小C

    3509. [NOIP2013模拟11.5B组]倒霉的小C(beats) (File IO): input:beats.in output:beats.out Time Limits: 1000 ms ...

  6. JZOJ 3508. 【NOIP2013模拟11.5B组】好元素

    3508. [NOIP2013模拟11.5B组]好元素(good) (File IO): input:good.in output:good.out Time Limits: 2000 ms  Mem ...

  7. JZOJ 4272. 【NOIP2015模拟10.28B组】序章-弗兰德的秘密

    272. [NOIP2015模拟10.28B组]序章-弗兰德的秘密 (File IO): input:frand.in output:frand.out Time Limits: 1000 ms  M ...

  8. CSS3 animation（动画） 属性

    一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...

  9. 利用css3的多背景图属性实现幻灯片切换效果

    css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...

随机推荐

  1. web app开发利器 - iscroll4 解决方案

    存在即是道理,iscroll会诞生,主要是因为无论是在iphone.ipod.android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容, 这个不幸的规则 ...

  2. 【Win10】SplitView控件

    SplitView是Win10中的新控件. 用于呈现两部分视图. 一个视图是主要内容,另一个视图是用于导航.(也就是通常说的汉堡菜单.) 主要结构: <SplitView> <Spl ...

  3. 一张图告诉你，只会Node.JS还不够！

    一本nodejs代码段.

  4. Android五岁了

    今日(2013-9-24),谷歌开源系统Android迎来了它5岁的生日. 时间过得真快啊!当时的android并不被人看好,而现在的android已经成为了全球最大的智能手机操作系统.而现在的诺基亚 ...

  5. Redis 缓存过期（maxmemory） 配置/算法 详解

    LRU(Least Recently Used) 最近最少使用算法是众多置换算法中的一种. Redis中有一个 maxmemory 概念,主要是为了将使用的内存限定在一个固定的大小.Redis 用到的 ...

  6. 深入浅析JAVA注解

    注解,相信大家都会知道,像@requestMapping,@Resource,@Controller等等的一些注解,大家都用过,那么,他的工具类你用过吗?下面就和大家一起来分享一下注解工具类. 注解的 ...

  7. MySQL日志

    在MySQL中共有4中日志:错误日志.二进制日志.查询日志和慢查询日志 一.错误日志 错误日志名 host_name.err,并默认在参数DATADIR指定的目录中写入日志文件.可使用 --log-e ...

  8. phpcurl类

    1.需求 了解curl的基本get和post用法 2.例子 <?php class Curl{ private $timeout=30; public function set_timeout( ...

  9. 使用Ruby来实现批量更新AD中字段

    准备工作 安装需要用到的gem gem install net-ldap gem install roo 准备好要更新的数据,比如exel表: /root/account.xlsx,内容如下 姓名 性 ...

  10. PEAR安装

    看到PEAR章节,提到安装PEAR需要go-pear.bat,我机器上的PHP(v7.0.8)目录下,并没有go-pear.bat这个文件,网上查了一遍,怎么说的都有,最后还是在官网上找到解决方案. ...