<!DOCTYPE html>

<html>

<head>

	<title></title>

</head>

<body>

<div id="div1" style="width: 100px;height: 100px;background: red;position: absolute;top:0;left: 0;"></div>

</body>

<script type="text/javascript">

	function animate(ele,attr,value){

		var speed;

		var timer=null;

		(function(){

			clearInterval(timer);

			timer=setInterval(function(){

				var now=parseInt(ele.style[attr]);

				speed=(value-now)/10;

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

				if(now!=value){

					ele.style[attr]=now+speed+'px';

				}else{

					clearInterval(timer);

				}

			},30);

		})();

	}

	var div = document.getElementById("div1");

	animate(div,'top',200);

	animate(div,'left',100);

</script>

</html>

==============================更新一下==============================

上面那个还是太挫了，看下面这个：　

var getStyle = function(obj,attr){

		if(obj.style[attr]){

			/*内联样式*/

			return obj.style[attr];

		}else if(obj.currentStyle){

			/*IE*/

			return obj.currentStyle[attr];

		}else if(document.defaultView.getComputedStyle(obj)){

			/*W3C*/

			return document.defaultView.getComputedStyle(obj)[attr];

		}else{

			return null;

		}

	}

var startMove=function(obj,json,fn){

		clearInterval(obj.timer);

		obj.timer = setInterval(function(){

			var stop = true;//停止变量

			for(var attr in json){

				/*计算属性当前值*/

				var current = 0;

				if(attr == 'opacity'){

					current = parseInt(parseFloat(getstyle(obj,attr))*100);

				}else{

					current = parseInt(getstyle(obj,attr));

				}

				/*计算速度*/

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

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

				/*判断是否停止*/

				if(current != json[attr]){

					stop = false;

				}

				/*改变属性值*/

				if(attr == 'opacity'){

					obj.style.filter = 'alpha(opacity:'+(current+speed)+')';

					obj.style.opacity = (current+speed)/100;

				}else{

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

				}

			}

			/*结束停止定时器*/

			if( stop ) {

				clearInterval( obj.timer );

				if(fn){

					fn();

				}

			}

		},100);

	}

　　

Js运动框架的更多相关文章

  1. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  2. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  3. js 运动框架及实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js运动框架逐渐递进版

    运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...

  5. js运动框架之掉落的扑克牌（重心、弹起效果）

    玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图:    这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...

  6. js运动框架完成块的宽高透明度及颜色的渐变

    了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...

  7. js运动框架 step by step

    开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...

  8. JS运动框架的封装过程(一)

    给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...

  9. 完美的js运动框架

    //完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...

  10. js 运动框架-轻量级

    具体代码如下: function move(obj,json,sv,fnEnd){ //CSS样式值 function getStyle(obj,attr){ if(obj.currentStyle) ...

随机推荐

  1. 夜深了，写了个JQuery的省市区三级级联效果

    刚刚练手的JQuery,希望大神们指正 主要实现以下功能: 1.三级菜单级联加载数据 2.可以在不操作脚本的情况下,给元素加属性实现级联功能 3.自定义动态显示数据 咨询问题: 对于一般比较固定不变的 ...

  2. ASP.Net WebForm温故知新学习笔记：一、aspx与服务器控件探秘

    开篇:毫无疑问,ASP.Net WebForm是微软推出的一个跨时代的Web开发模式,它将WinForm开发模式的快捷便利的优点移植到了Web开发上,我们只要学会三步:拖控件→设属性→绑事件,便可以行 ...

  3. 探索c#之跳跃表(SkipList)

    阅读目录: 基本介绍 算法思想 演化步骤 实现细节 总结 基本介绍 SkipList是William Pugh在1990年提出的,它是一种可替代平衡树的数据结构. SkipList在实现上相对比较简单 ...

  4. C++的性能C#的产能?! - .Net Native 系列《二》：.NET Native开发流程详解

    之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...

  5. Windows+GCC下内存对齐的常见问题

    结构/类对齐的声明方式 gcc和windows对于modifier/attribute的支持其实是差不多的.比如在gcc的例子中,内存对齐要写成: class X { //... } __attrib ...

  6. PDO 数据访问抽象层

    1.操作其它数据库 (1)造对象 $dsn = "mysql:dbname=test3;host=localhost"; //数据源:两个参数:数据库驱动,链接数据库 $pdo = ...

  7. JS原生第七篇 （帅哥）

    1.1 复习 offset   自己的 偏移 offsetWidth    得到自己的宽度 offsetHeight 构成 :   width  +   padding  +  border div ...

  8. MVC5 网站开发实践 概述

    目录 MVC5 网站开发实践  概述 MVC5 网站开发实践  1.建立项目 MVC5 网站开发实践  2.后台管理 MVC5 网站开发实践  2.1.管理员登陆 MVC5 网站开发实践 2.2.管理 ...

  9. 前端学PHP之面向对象系列第一篇——类和对象

    × 目录 [1]类 [2]成员属性[3]成员方法[4]对象[5]成员访问[6]this 前面的话 面向对象程序设计(OOP)是一种计算机编程架构.计算机程序由单个能够起到子程序作用的单元或对象组成,为 ...

  10. 创建 VXLAN - 每天5分钟玩转 OpenStack（111）

    前面我们讨论了 VXLAN 的理论知识,并且在 ML2 中完成了相关配置.今天将通过 Web UI 创建 vxlan100_net 并观察节点网络结构的变化. 打开菜单 Admin -> Net ...