（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.οnlοad=function ()
{var oDiv=document.getElementById('div1');//先获取div元素oDiv.οnmοuseοver=function (){startMove(oDiv,'width',300,function(){//先是宽变300startMove(oDiv,'height',300,function(){//当宽变300的时候，即运动结束时候开启另一个运动，使其高变为300startMove(oDiv,'opacity',100);//使透明度变成100，原来是30});});};oDiv.οnmοuseοut=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运动之链式运动框架相关推荐

Javascript之链式运动框架1
第一部分:HTML内容: <script src="6-1.js"></script> <script> window.οnlοad=funct ...
javascript从入门到跑路-----小文的js学习笔记（25）------运动框架----匀速运动、缓冲运动、多物体运动、链式运动
** javascript从入门到跑路-----小文的js学习笔记(1)---------script.alert.document.write() 和 console.log 标签 javascri ...
Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
【原生JS组件】javascript 运动框架
大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...
js运动应用之运动框架
js运动应用之运动框架 <style>div{width:200px;height:200px;background-Color:yellow;float:left;font-size:1 ...
模拟智能手环的时间显示功能 c语言,HT1635AHT1635B在穿戴式运动手环的LED显示之C语言版.PDF...
HT1635AHT1635B在穿戴式运动手环的LED显示之C语言版.PDF HT1635A/HT1635B 在穿戴式运动手环的LED 显示之C 语言版应用范例 HT1635A/HT1635B 在穿戴式 ...
基于vue的响应式ui框架_基于Vue.js的响应式和可配置UI框架
基于vue的响应式ui框架 Framevuerk (Framevuerk) Fast, Responsive, Multi Language, Both Direction Support and C ...
【Spring 5】响应式Web框架实战（下）
- [Spring 5]响应式Web框架前瞻 - 响应式编程总览 - [Spring 5]响应式Web框架实战(上) 1 回顾上篇介绍了如何使用Spring MVC注解实现一个响应式Web应用( ...
html5 2015,2015年有用的16大免费的响应式HTML5框架
Twitter Bootstrap Bootstrap是全世界最流行的html5框架之一.Twitter Bootstrap是光滑的.直观和强大的前端web开发框架,令开发更加快捷.容易.它拥有用于开 ...

（43）JS运动之链式运动框架

（43）JS运动之链式运动框架相关推荐

最新文章

热门文章