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. @RequestParam @RequestBody @PathVariable 等参数绑定注解详解

    文章主要讲解request 数据到handler method 参数数据的绑定所用到的注解和什么情形下使用. 简介: handler method 参数绑定常用的注解,我们根据他们处理的Request ...

  2. 【Java】增强的for流程

    增强for循环语法: for(type element: array) {       System.out.println(element); } 可遍历输出数组元素,但无法获取元素下标. 相关链接 ...

  3. IIS7.0发布Web服务器0002

    asp.net发布到IIS中出现错误:处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler” 分类: BS学 ...

  4. SpingMvc中的异常处理

    一.处理异常的方式      Spring3.0中对异常的处理方法一共提供了两种: 第一种是使用HandlerExceptionResolver接口. 第二种是在Controller类内部使用@Exc ...

  5. 一个java源文件中为什么只能有一个public类。

    我们都遇到过一个源文件中有多个java类,但当第一个类使用public修饰时,如果下面还有类使用public修饰,会报错.也就是是说一个java源文件最多只能有一个public类. 当有一个publi ...

  6. node.js下使用RSA加密事例(windows)

    1.安装openss 直接下载window下的安装包 http://houjixin.blog.163.com/blog/static/3562841020144143494875/ 以我发博文现在的 ...

  7. Linux学习之十--.Net Core环境搭建以及Nginx的搭建

    一.Centos7下.Net Core 环境安装: 链接:https://www.microsoft.com/net/core#linuxcentos 按照步骤来: yum install libun ...

  8. JDBC值事务

    事务的四大特性: 原子性, 一致性(比如说A给B转账,A转了之后B的账户增加了,两个都完成才叫一致性),隔离性(A给B转账,A给C转账,AB和AC并发是无关的),永久性(转账之后 不可能复原,就是说不 ...

  9. 菜鸟笔记：java编程基础一

    Java中的关键字 Java 语言中有一些具有特殊用途的词被称为关键字.关键字对 Java 的编译器有着特殊的意义,在程序中应用时一定要慎重哦!! Java 中常用关键字: 问:这么多,记不住啊... ...

  10. Java Native Interface 四--JNI中引用类型

    本文是<The Java Native Interface Programmer's Guide and Specification>读书笔记 JNI支持将类实例和数组类型(如jobjec ...