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. RabbitMQ修改端口号和心跳时间

    定读者正在Windows系列的操纵体系中装置好了Rabbit MQ后,请找到装置途径下的etc文件夹下,将rabbitmq.config.example备份一份,并点窜为config范例的文件,即为] ...

  2. BLAST套件

    Blastn是将给定的核酸序列与核酸数据库中的序列进行比较: Blastp是使用蛋白质序列与蛋白质数据库中的序列进行比较,可以寻找较远的关系: Blastx将给定的核酸序列按照六种阅读框架将其翻译成蛋 ...

  3. 用Python生成测试数据

    转载自:http://blog.csdn.net/caz28/article/details/45972109 有时我们需要大量的数据,一般编个程序生成一堆随机数据,Python很适合文本处理,干这个 ...

  4. mysql导出部分表数据

    mysqldump -uroot -p -h 192.168.1.11 -P 3306 mojiarticle UID_IMEI --where "ID > 1021230 and I ...

  5. python 2.7 学习笔记--文件的基本操作

    1.打开文件的方式 file_obj = file("文件路径","模式") file_obj = open("文件路径","模式 ...

  6. input事件与change事件

    输入框的change事件: 必须等到输入框失去焦点的时候才会触发,鼠标在空白的地方点一下: 输入框的input事件: 在输入内容变化的同时,实时的触发,不需要等到失去焦点.

  7. java中HttpServletRequest常用获取url、资源名等方法总结

    HttpServletRequest客户端获取请求,客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中.所以我们能够从对象中获取相应信息   端口 request.get ...

  8. 将本地项目提交到coding上托管

    1:   注册coding并新建项目test2:在终端 cd 到要提交的项目  使用git init创建.git文件夹3:使用git pull  <项目地址>https的那个4:git a ...

  9. linux 软连接和硬链接

    硬链接 ln sourceFile targetFile 硬链接只能给文件创建,不能为目录建立硬链接,硬链接不能跨分区创建,  硬链接会增加inode连接数, 硬链接的文件删除不影响其他文件 课外: ...

  10. 用遗传算法GA改进CloudSim自带的资源调度策略(2)

    遗传算法GA的核心代码实现: 最核心: private static ArrayList<int[]> GA(ArrayList<int[]> pop,int gmax,dou ...