（43）JS运动之链式运动框架
链式运动框架就是一系列的运动分阶段进行，在普通的运动框架上加上一个參数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运动之链式运动框架的更多相关文章
- js动画之链式运动
链式运动就是当一个运动完,又启动另外一个运动,这个怎么实现呢?这里我们是用用回调函数实现一套链式动画 显示给div左移100像素,然后然后透明度变100 <!DOCTYPE html> & ...
- JS之链式运动，及任意值运动框架，包括透明度的改变
链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数, function ...
- js动画--链式运动
前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...
- Javascript之链式运动框架1
第一部分:HTML内容: <script src="6-1.js"></script> <script> window.onload=funct ...
- Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
- javascript链式运动框架案例
javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...
- 【原生JS组件】javascript 运动框架
大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...
- HTML+JavaScript实现链式运动特效
在学习js的过程中,发现这家伙做特效真是不错,尽管说眼下水平还不够,只是也能写点简单的效果. 今天分享一个简单的运动框架.然后利用这个框架实现简单的链式运动特效. 1.move.js 在运动框架中.主 ...
- 原生JavaScript运动功能系列（四）：多物体多值链式运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...
随机推荐
- Python 调用snmp自定义OID实现监控
http://kkkkkk.blog.51cto.com/468162/1172726 http://blog.csdn.net/mirahs/article/details/49619729
- EF框架—Database-First
ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案,现已经包含在 Visual Studio 2008 S ...
- Hadoop2 伪分布式部署
一.简单介绍 二.安装部署 三.执行hadoop样例并測试部署环境 四.注意的地方 一．简单介绍 Hadoop是一个由Apache基金会所开发的分布式系统基础架构,Hadoop的框架最核心的设计就是: ...
- Raphaeljs入门到精通（一）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- Find problem in eXtremeDB
class table1 { char<8> f1; char<80> f2; uint4 f3; uint4 f4; double ...
- 在VPS上用Outline Manager 建立*** 增强版服务器
在VPS上用Outline Manager 建立*** 增强版服务器 原文 https://free.com.tw/google-outline/ Outline 是Google Jigsaw的一款开 ...
- 学习 shell —— 创建序列数组
list/array 1. seq 方法创建 基本用法: $ a_num_seq = ($seq 5) $ echo $a_num_seq 1 2 3 4 5 a_num_seq 得到是字符串,不同之 ...
- 我在看着你呢——shiro学习
说实话开学第一周效率并不高.项目该结的都差不多结了,看来这毛病我是养成了.项目忙的要死的时候,想休息想停一停就不断往下扔包袱.一下没项目了开学了,反倒开始手痒,捉摸着写点什么代码.马上我的小mac就要 ...
- 直接修改Android软件数据库来改变软件设置实例一则
昨天把K860i刷了机,刷到了最新的CyanogenMod 10.1,使用起来各种流畅舒服,不过却由于内外置SD卡的挂载点的改变,造成了一些困扰,现记录如下. 平时里由于极少把手机连接 ...
- Webhook
Webhook就是用户通过自定义回调函数的方式来改变Web应用的一种行为,这些回调函数可以由不是该Web应用官方的第三方用户或者开发人员来维护,修改.通过Webhook,你可以自定义一些行为通知到指定 ...