(43)JS运动之链式运动框架
2014-07-25 20:35
330 查看
链式运动框架就是一系列的运动分阶段进行,在普通的运动框架上加上一个参数function,这个function表示下一个要执行的动作,具体代码如下:
当鼠标移进的时候,先横向变宽,再纵向变高,最后透明度变成100,效果如下:
当鼠标移出的时候,效果刚好和上面相反:
<!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运动技术--链式运动框架
- JS链式运动框架
- 完美运动(链式运动)JS框架
- 通过alpha变量实现图片透明度渐变(仍然用到JS缓冲运动框架)
- js 运动框架
- JS-运动框架
- js-运动框架(时间版)
- js完美多物体运动框架(缓冲运动)
- JS运动框架之分享侧边栏动画实例
- js 运动框架(一)匀速运动
- js多物体运动框架
- JS的完美运动框架
- JS运动基础框架
- JS运动框架之分享侧边栏动画
- Javascript 链式运动框架——逐行分析代码,让你轻松了解运动的原理
- JS运动框架
- 链式运动框架
- 妙味——链式运动框架及应用
- Javascript 链式运动框架——逐行分析代码,让你轻松了解运动的原理