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. vim 编辑器的光标操作

    vim中最简单的移动光标的方式是使用使用方向键操作,但这种方式的效率底下,更高效的方式是使用快捷键,常用的快捷键如下表所示. 快捷键                                 功 ...

  2. Openxml 笔记

    用openxml 生成Excel: private void GenerateExcelUsingOpenxml(DataTable dataTable, string GeneratePath)   ...

  3. 等价类划分方法的应用（jsp）

    [问题描述] 在三个文本框中输入字符串,要求均为1到6个英文字符或数字,按submit提交. [划分等价类] 条件1: 字符合法; 条件2: 输入1长度合法; 条件3: 输入2长度合法: 条件4: 输 ...

  4. 【bzoj1688】[USACO2005 Open]Disease Manangement 疾病管理

    题目描述 Alas! A set of D (1 <= D <= 15) diseases (numbered 1..D) is running through the farm. Far ...

  5. 分分钟教你从根本上认识Struts2框架

    在了解Struts2之前我们先来聊聊Struts1,我们都知道在很长的一段时间内,所有的MVC框架中,Struts1他是处于一个超级大咖的地位,无论是从市场角度和使用的用户的数量这个角度而言,Stru ...

  6. 关于JavaScript初级的知识点一（持续更新 ）

    自己刚开始接触JS这是自己一个多月以来的一些总结和回顾. 一.什么是js? js是一种弱类型的脚本语言,是HTML的3大组成部分之一.HTML标签 CSS样式 JS脚本. 二.js的5种基本数据类型 ...

  7. Collection小结

    Collection:

  8. Android Studio 导出jar包

    不像在Eclipse,可以直接导出jar包.AndroidStudio只可以生成aar包. 在网上看到许多朋友问怎么可以像Eclipse一样导出jar包,其实我们只要知道它的原理就可以了. 用jar命 ...

  9. WebForm控件--2016年12月29日

    简单控件 1.Label  =>   <span id="Label1">Label1</span> 2.Literal  =>  Text 填 ...

  10. WinForm用户控件、动态创建添加控件、timer控件--2016年12月12日

    好文要顶 关注我 收藏该文 徐淳 关注 - 1 粉丝 - 3       0 0     用户控件: 通过布局将多个控件整合为一个控件,根据自己的需要进行修改,可对用户控件内的所有控件及控件属性进行修 ...