在学习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. bzoj 1485 卡特兰数 + 分解因子

    思路:打表可以看出是卡特兰数,但是模数不一定是素数,所以需要分解一下因数. #include<bits/stdc++.h> #define LL long long #define fi ...

  2. 解决Cocos2d-js 在使用 TiledMap时的黑线问题

    在项目中,加载TiledMap时,如果当前显示分辨率与设计分辨率不符,做出的地图上会有黑线产生.屏幕移动时,也会有黑线. 解决的方式很简单.找到配置文件  CCConfig.js  一般情况是在 ra ...

  3. Docker与Android Studio的冲突问题

    在行业内,VisualBox.VMware.Hyper-V冲突也不是什么秘密了 我在公司的电脑上先安装了Docker,并在安装Docker之前在BIOS中开启了虚拟化支持,所以在启动Docker时没有 ...

  4. http.pieplining

    默认情况下http协议中每个传输层连接只能承载一个http请求和响应,然后结束. HTTP是一个简单的协议.客户进程建立一条同服务器进程的 T C P连接,然后发出请求并读取服务器进程的响应.服务器进 ...

  5. 转：Filter的执行顺序与实例

    转:http://www.cnblogs.com/Fskjb/archive/2010/03/27/1698448.html Filter的执行顺序与实例 Filter介绍 Filter可认为是Ser ...

  6. (7) go 函数

    1.格式 调用 2.包 (1)包 本质 文件夹.每一个文件都必须属于一个包 (2)给包取别名 (3)函数的首字母大小,决定是否能被外包访问 (3) 3.多返回值 4.递归 5.基本数据类型和数组都是拷 ...

  7. 114. Flatten Binary Tree to Linked List【Medium】【将给定的二叉树转化为“只有右孩子节点”的链表（树）】

    Given a binary tree, flatten it to a linked list in-place. For example, given the following tree: 1 ...

  8. 杭电oj 1001

    #include<iostream> using namespace std; int main() { , sum; while (cin>>n) { sum = ; // ...

  9. 【UOJ #34】多项式乘法

    http://uoj.ac/problem/34 看了好长时间的FFT和NTT啊qwq在原根那块磨蹭了好久_(:з」∠)_ 首先设答案多项式的长度拓展到2的幂次后为n,我们只要求出一个g(不是原根)满 ...

  10. 【斜率优化】bzoj3675-[Apio2014]序列分割&&Uoj104

    题目大意 将一个长度为N的非负整数序列分割成k+l个非空的子序列,每次选择一位置分割后,将会得到一定的分数,这个分数为两个新序列中元素和的乘积.求最大的分数. [UOJ104]并输出任意一种方案 思路 ...