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. 每天写点shell——read的用法

    1.read基本读取 #!/bin/bash #testing the read command echo -n "Enter you name:" #echo -n 让用户直接在 ...

  2. （一）SQL Server分区详解Partition（目录）

    一.SQL Server分区介绍 在SQL Server中,数据库的所有表和索引都视为已分区表和索引,默认这些表和索引值包含一个分区:也就是说表或索引至少包含一个分区.SQL Server中数据是按水 ...

  3. Quick Cocos 旋转子弹的实现中我学到的

    self 在lua中相当于java中的this lua中的任何变量在没有赋值前, 都可以看做是nil  lua变量有3种,成员变量: self.变量名 = 局部变量: local 变量名 = 全局变量 ...

  4. Node.js学习笔记（一）

    1.回调函数 node是一个异步事件驱动的平台,所以在代码中我们经常需要使用回调函数. 例: setTimeout(function(){ console.log('callback is calle ...

  5. MySQL主从复制

    Mysql主从复制介绍 MySQL支持单向.双向.链式级联.实时.异步复制.在复制过程中,一台服务器充当服务器(Master),而一个或多个其它的服务器充当从服务器(Slave). 复制可以是单向:M ...

  6. CF Round #367 C题

    题目 链接:http://codeforces.com/contest/706/problem/C 好像又是DP... dp[i][0]表示第i个字符串不翻转成字典序排列的花费,dp[i][1]表示第 ...

  7. Makefile的编写

    makefile介绍 makefile的功能是管理源文件的编译链接,在makefile我们可以定义一系列的规则来指定哪些文件需要先编译,哪些文件需要后编译,哪些文件需要重新编译,甚至于进行更复杂的功能 ...

  8. MarkdownPad2.5 注册码

    邮箱: Soar360@live.com 授权秘钥: GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6b ...

  9. AJAX获取数据成功后的返回数据如何声明成全局变量

    var result=""; $.ajax({ type: "post", url: "../reportRule/main.do?method=se ...

  10. 全排列算法的JS实现

    问题描述:给定一个字符串,输出该字符串所有排列的可能.如输入“abc”,输出“abc,acb,bca,bac,cab,cba”. 虽然原理很简单,然而我还是折腾了好一会才实现这个算法……这里主要记录的 ...