<!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. The Myths about Transactions (ACID) and NoSQL

    There has been widespread characterization of one of the major distinctions between NoSQL and tradit ...

  2. SQL Server 2016中In-Memory OLTP继CTP3之后的新改进

    SQL Server 2016中In-Memory OLTP继CTP3之后的新改进 转译自:https://blogs.msdn.microsoft.com/sqlserverstorageengin ...

  3. 突破瓶颈，对比学习：Eclipse开发环境与VS开发环境的调试对比

    曾经看了不少Java和Android的相关知识,不过光看不练易失忆,所以,还是写点文字,除了加强下记忆,也证明我曾经学过~~~ 突破瓶颈,对比学习: 学习一门语言,开发环境很重,对于VS的方形线条开发 ...

  4. 体验 ASP.NET Core 1.1 中预编译 MVC Razor 视图

    这是从 ASP.NET Core 1.1 官方发布博文中学到的一招,可以在 dontet publish 时将 Razor 视图编译为 .dll 文件. 需要在 project.json 中添加如下配 ...

  5. SQL Server 数据库设计规范

    数据库设计规范 1.简介 数据库设计是指对一个给定的应用环境,构造最优的数据库模式,建立数据库及其他应用系统,使之能有效地存储数据,满足各种用户的需求.数据库设计过程中命名规范很是重要,命名规范合理的 ...

  6. 【效率】专为Win7系统设计的极简番茄计时器 - MiniPomodoro （附源码）

    时光飞逝,一转眼坚持使用番茄工作法已经快3年了!能坚持这么长时间,主要还是得益于它的简单.但是令人纠结的是,这么长时间以来,换了7款不同的番茄计时器,仍然没有找到非常满意的: ■ 机械的噪音太大,会妨 ...

  7. 神兵利器——Alfred

    有人的地方就有江湖,有江湖就有纷争. 很多人说我的文字风格相对轻松和温和,那是因为我很早就认识到,我们没有教育脑残和喷子的义务.在网际多年,看过太多虚拟的刀锋和鲜血,很多人被彻头彻尾的粉碎,挫骨扬灰, ...

  8. 《Entity Framework 6 Recipes》中文翻译系列 (18) -----第三章 查询之结果集扁平化和多属性分组

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-14  结果集扁平化 问题 你有一对多关联的两个实体,你想通过一个查询,获取关联 ...

  9. Oracle 超长字符串分割劈分

    Oracle 超长字符串分割劈分,具体能有多长没测过,反正很大.... 下面,,,,直奔主题了: CREATE OR REPLACE FUNCTION splitstr(p_string IN clo ...

  10. IOS关于LKDBHelper实体对象映射插件运用

    一 插件简介: 其github地址:https://github.com/li6185377/LKDBHelper-SQLite-ORM 全面支持 NSArray,NSDictionary, Mode ...