链式运动框架就是一系列的运动分阶段进行，在普通的运动框架上加上一个參数function，这个function表示下一个要运行的动作。详细代码例如以下：

<!DOCTYPE HTML>

<!--链式运动框架：运动分阶段进行，当运动停止的时候。运行下一个运动-->

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

#div1 {width:100px;height:100px;background:red;filter:alpha(opacity:30);opacity:0.3}

</style>

<script>

window.onload=function ()

{

	var oDiv=document.getElementById('div1');//先获取div元素

	oDiv.onmouseover=function ()

	{

		startMove(oDiv,'width',300,function(){//先是宽变300

			startMove(oDiv,'height',300,function(){//当宽变300的时候，即运动结束时候开启还有一个运动，使其高变为300

				startMove(oDiv,'opacity',100);//使透明度变成100，原来是30

			});

		});

	};

	oDiv.onmouseout=function ()//当鼠标移出的时候，跟移进的时候效果相反就可以。

{

		startMove(oDiv,'opacity',30,function(){

			startMove(oDiv,'height',100,function(){

				startMove(oDiv,'width',100);

			});

		});

	};

};//下面是运动框架的内容

function getStyle(obj, name)

{

	if(obj.currentStyle)

	{

		return obj.currentStyle[name];

	}

	else

	{

		return getComputedStyle(obj, false)[name];

	}

}

function startMove(obj, attr, iTarget, fnEnd)//比普通的运动框架写多了一个函数，说明下一阶段要运行的运动

{

	clearInterval(obj.timer);

	obj.timer=setInterval(function (){

		var cur=0;

		if(attr=='opacity')

		{

			cur=Math.round(parseFloat(getStyle(obj, attr))*100);

		}

		else

		{

			cur=parseInt(getStyle(obj, attr));

		}

		var speed=(iTarget-cur)/6;

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

		if(cur==iTarget)

		{

			clearInterval(obj.timer);

			if(fnEnd)fnEnd();

		}

		else

		{

			if(attr=='opacity')

			{

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

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

			}

			else

			{

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

			}

		}

	}, 30);

}

</script>

</head>

<body>

	<div id="div1"></div>

</body>

</html>

效果图：

当鼠标移进的时候，先横向变宽，再纵向变高。最后透明度变成100，效果例如以下：

当鼠标移出的时候。效果刚好和上面相反：

（43）JS运动之链式运动框架的更多相关文章

  1. js动画之链式运动

    链式运动就是当一个运动完,又启动另外一个运动,这个怎么实现呢?这里我们是用用回调函数实现一套链式动画 显示给div左移100像素,然后然后透明度变100 <!DOCTYPE html> & ...

  2. JS之链式运动，及任意值运动框架，包括透明度的改变

    链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数, function ...

  3. js动画--链式运动

    前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...

  4. Javascript之链式运动框架1

    第一部分:HTML内容: <script src="6-1.js"></script> <script> window.onload=funct ...

  5. Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理

    所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...

  6. javascript链式运动框架案例

    javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...

  7. 【原生JS组件】javascript 运动框架

    大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...

  8. HTML+JavaScript实现链式运动特效

    在学习js的过程中,发现这家伙做特效真是不错,尽管说眼下水平还不够,只是也能写点简单的效果. 今天分享一个简单的运动框架.然后利用这个框架实现简单的链式运动特效. 1.move.js 在运动框架中.主 ...

  9. 原生JavaScript运动功能系列（四）：多物体多值链式运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...

随机推荐

  1. .NET 将 .config 文件嵌入到程序集

    原文:.NET 将 .config 文件嵌入到程序集 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Iron_Ye/article/details/ ...

  2. CSU 1249 竞争性酶抑制剂和同工酶

    1249: 竞争性酶抑制剂和同工酶 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 109  Solved: 49 Description 人体内很多化学 ...

  3. 有关于OpenGL、OpenGL ES、WebGL的小结

    转自原文 有关于OpenGL.OpenGL ES.WebGL的小结 一.   OpenGL简介 OpenGL(全写Open Graphics Library)是个定义了一个跨编程语言.跨平台的编程接口 ...

  4. 数据迁移工具kettle简单上手

    近期做了不少数据迁移工作,无一例外都是kettle做的,对于这些工具,我认为.够用就好,不用做特别多的研究(当然.除非你是这款工具的忠实粉丝,我相信这种没几个).kettle也不例外.在我看来就是不同 ...

  5. 同一个事务里 查询 已删除可是未提交的数据[bug记录]

    前几天犯了个低级错误.在一个事务方法里老是查询不到某条记录,可是debug卡住时,用db工具查.又能查出值. 经过一番折腾,原来是我在同一个事务里 查询 了已删除可是未提交的数据.当然查询不到了! . ...

  6. UI_UISegmentedControl 控件

    创建控件 - (void)createSegmentControl { UISegmentedControl *segmentedControl = [[UISegmentedControl allo ...

  7. IIS集成和经典配置

    检測到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式).  我们将ASP.NET程序从IIS6移植到IIS7,可能执行提示下面错误: HTTP 错误 500. ...

  8. .Net中字典的使用

    /// <summary> /// 获取用户市信息 /// </summary> /// <param name="CustomerId">&l ...

  9. hdoj--5333--Dancing Stars on Me（水题）

    Dancing Stars on Me Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Ot ...

  10. mybatis :与Spring MVC 的集成

    用mybatis与Spring mvc 的方式集成起来,源码在本文结尾处下载.主要有以下几个方面的配置1. web.xml 配置 spring dispatchservlet ,比如为:mvc-dis ...