在学习js的过程中，发现这家伙做特效真是不错，尽管说眼下水平还不够，只是也能写点简单的效果。

今天分享一个简单的运动框架。然后利用这个框架实现简单的链式运动特效。

1.move.js

在运动框架中。主要进行长宽变化和透明度的变化。长宽的变化能够实现DIV的体积运动变化效果。透明度的话主要是在鼠标移入移出事件中加入淡入淡出的效果。我将这个简单的运动框架封装到一个单独的js文件里，方便调用。

先看看代码：

<span style="font-family:KaiTi_GB2312;">//用于获取非行间样式</span>

function getStyle(obj,name){

	if(obj.currentStyle){

		return obj.currentStyle[name];

	}else{

		return getComputedStyle(obj,false)[name];

	}

}

<span style="font-family:KaiTi_GB2312;">//四个參数分别为对象，属性，改动值，函数</span>

function startMove(obj,attr,iTarget,func){

	clearInterval(obj.timer);

	obj.timer=setInterval(function(){

		var cur=0;

		<span style="font-family:KaiTi_GB2312;">//推断要变化的属性是否为透明度</span>

		if(attr=='opacity'){

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

		}else{

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

		}

		//<span style="font-family:KaiTi_GB2312;">运动速度计算</span>

		var speed=(iTarget-cur)/6;

		speed=speed>0?

Math.ceil(speed):Math.floor(speed);

		if(cur==iTarget){

			clearInterval(obj.timer);

<span style="font-family:KaiTi_GB2312;">                             //若存在函数參数。则运行函数</span>

			if(f<span style="font-family:KaiTi_GB2312;">unc</span>){

			<span style="font-family:KaiTi_GB2312;">         </span>f<span style="font-family:KaiTi_GB2312;">unc</span>();

			}

 		}else{

 			if(attr=='opacity'){

				<span style="font-family:KaiTi_GB2312;">//保证IE和FF的兼容性</span>

<span style="font-family:KaiTi_GB2312;">                                      </span>obj.style.filter='alpha(opacity:'+(cur+speed)+')';

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

			}else{

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

			}

		}

	},30);

}

2.index.html

<html>

<head>

<meta charset="utf-8">

<style>

#div1{

	width:100px;

	height:100px;

	background:red;

	filter:alpha(opacity:30);opacity:0.3;

}

</style>

<script src="move.js"></script>

<script>

window.onload=function(){

	var oDiv=document.getElementById('div1');

	oDiv.onmouseover=function (){

		startMove(oDiv,'width',300,function(){

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

				startMove(oDiv,'opacity',100);

			});

		});

	};

	 oDiv.onmouseout=function (){

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

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

				startMove(oDiv,'width',100);

			});

		});

	};

};

</script>

</head>

<body>

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

</body>

</html>

在mouseover中：先将DIV进行width变化，等运动结束。

然后进行height变化，最后进行opacity变化。

在mouseout中：先进行opacity变化，然后是height变化，最后进行width变化。就是和移入事件运动顺序全然相反。（此实例并无直接应用意义，可是对运动框架进行一些完好之后就能够做一些常见的特效了）

在startMove()的使用过程中。有类似与递归调用的感觉。只是这个好理解多了。

3.小结

尽管说运动框架仅仅有几十行的代码，可是当中的细节还是非常多的。假设实用到这个框架的同学，在使用的时候先好好整理代码的逻辑。要不然出了bug。也真够虐心的。还好，我把凝视写的非常清楚了，希望能帮助到有须要的人。

上两张运动前后的图：

（忽略水印）

详细运动过程还是自己实践一番为好，再稍作修饰的话。效果肯定倍加。

HTML+JavaScript实现链式运动特效的更多相关文章

  1. javascript学习-原生javascript的小特效（原生javascript实现链式运动）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

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

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

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

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

  4. javascript链式运动框架案例

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

  5. JavaScript运动_封装模板(支持链式运动、完美运动)

    最近自学到了JS运动部分,自己整理了一些js模板,望采纳. 1.支持链式运动的模板: 先解释一下函数中的几个参数含义: 1)obj: 要操作的对象 2)target: 属性要到达的目标值 3)attr ...

  6. js动画--链式运动

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

  7. JavaScript实现链式调用

    学习Jquery的时候,我们通常会看到链式调用的写法 $(window).addEvent('load', function(){ $('test').show().setStyle('color', ...

  8. 简谈 JavaScript、Java 中链式方法调用大致实现原理

    相信,在 JavaScript .C# 中都见过不少链式方法调用,那么,其中实现该类链式调用原理,大家有没有仔细思考过?其中 JavaScript 类库:jQuery 中就存在大量例子,而在 C# 中 ...

  9. Javascript、C#、php、asp、python 等语言的链式操作的实现

    一.什么是链式操作 把需要的下一步操作的对象通过上一步操作返回回来.使完成某些功能具有持续性. 二.链式操作优点 代码更精简优雅.链式操作能大大精简代码量,多项操作一行代码一气呵成,搞定: 链式操作应 ...

随机推荐

  1. 六十六 aiohttp

    asyncio可以实现单线程并发IO操作.如果仅用在客户端,发挥的威力不大.如果把asyncio用在服务器端,例如Web服务器,由于HTTP连接就是IO操作,因此可以用单线程+coroutine实现多 ...

  2. bootstrap插件学习-bootstrap.tab.js(读码)

    先看bootstrap-tab.js的结构 var Tab = function ( element ) {} //构造器 Tab.prototype ={} //构造器的原型 $.fn.tab = ...

  3. Java介绍

    Java简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James Gosling和同事们共同研发,并在1995年正式推 ...

  4. 【读书笔记】周志华《机器学习》第三版课后习题讨<第一章-绪论>

    虽然是绪论..但是...真的有点难!不管怎么说,一点点前进吧... 声明一下答案不一定正确,仅供参考,为本人的作答,希望大神们能多多指教~ 1.1 表1.1中若只包含编号为1和4的两个样例,试给出相应 ...

  5. 在CentOS6或RHEL6恢复上ext4文件系统误删除的文件

    首先说明: [root@CentOS6 ~]# rm -rf / //这条命令不可以执行 [root@CentOS6 ~]# rm -rf /* //这条命令可以执行,别去试 ext4文件系统上误删除 ...

  6. PM过程的一些典型场景和问题

    如何进行团队激励 如何进行目标管理 如何进行绩效考核 如何处理团队沟通(技巧) 详述几种软件过程理论 需求分析和度量 测试过程和工具 开发管理过程

  7. BZOJ 1532 [POI2005]Kos-Dicing（二分+最大流判断）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1532 [题目大意] n个人,给出m场比赛,求出胜出的人最少赢的场次. [题解] 我们发 ...

  8. [转]Spring Security学习总结一

    [总结-含源码]Spring Security学习总结一(补命名空间配置) Posted on 2008-08-20 10:25 tangtb 阅读(43111) 评论(27)  编辑  收藏 所属分 ...

  9. C#中的Stack

    Stack(栈) 是一种先进后出的对象集合,它是一个泛型,所表示的类型可以为int,string这样的常见类型,也可以为用户自定义类型. 属性 描述 Count 获取 Stack 中包含的元素个数. ...

  10. JS零基础一步一步做应用全记录

    1.起因 作为几个外卖重度依赖癌晚期患者,呆宿舍的时候几个人一起叫外卖已经是常事.偶然看到隔壁宿舍在饿了么订餐的时候,看到在饿了么的首页上有一个谁去拿外卖的一个小游戏/工具,感觉这个小细节,饿了么把握 ...