JavaScript运动框架大集结---拥有JavaScript完美运动框架你将制作任意基于web2.0网页动画
2015-03-19 23:21
791 查看
JavaScript运动框架大集结---拥有一套JavaScript完美运动框架你将制作任意基于web2.0网页动画
JS运动框架的发展演变
1 starmove(iTarget) 原始运动框架 /////////////////////////////////// <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById("div1"); var oBt=document.getElementsByTagName('input')[0]; var time=null; oBt.onclick=function(){ clearInterval(time);//这里首先要关闭一个定时器,这是因为解决在运动过程中多次点击按钮从而产生多个定时器叠加的bug time=setInterval(function(){ var speed=7; if(oDiv.offsetLeft<=600) oDiv.style.left=oDiv.offsetLeft+speed+'px'; else{ clearInterval(time); } },30); } } </script> /////////////////////////////////// 2 startmove(obj,iTarget) 多物体运动框架 /////////////////////////////////////// <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementsByTagName('div'); for(var i=0;i<oDiv.length;i++) { oDiv[i].time=null;//并对每个div都开启一个定时器 oDiv[i].onmouseover=function(){ startmove(this,window.screen.width);//this表示当前的对象 } oDiv[i].onmouseout=function(){ startmove(this,80); } } }; function getStyle(obj,name){//获取行间样式的函数 if(obj.currentStyle){ return obj.currentStyle[name]; } else{ return getComputedStyle(obj,false)[name]; } } //var time=null; function startmove(obj,iTarget){//obj作为对象的参数 clearInterval(obj.time);//关掉当前对象的定时器 obj.time=setInterval(function(){//开启当前对象的定时器 var speed=(iTarget-parseInt(getStyle(obj,'width')))/20; speed=speed>=0?Math.ceil(speed):Math.floor(speed);//缓冲运动中的关键点,精确检测 if(iTarget==parseInt(getStyle(obj,'width'))){clearInterval(obj.time);}//关闭当前的定时器 else{ obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px'; } },30); } </script> /////////////////////////////////////// 3 startmove(obj,attr,iTarget) 任意值的运动框架 ////////////////////////////////////////////// <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementsByTagName('div'); oDiv[0].onmouseover=function(){ startmove(this,'font-size',60); } oDiv[0].onmouseout=function(){ startmove(this,'font-size',14); } oDiv[1].onmouseover=function(){ startmove(this,'opacity',100); } oDiv[1].onmouseout=function(){ startmove(this,'opacity',30); } oDiv[2].onmouseover=function(){ startmove(this,'height',400); } oDiv[2].onmouseout=function(){ startmove(this,'height',200); } oDiv[3].onmouseover=function(){ startmove(this,'width',600); } oDiv[3].onmouseout=function(){ startmove(this,'width',200); } oDiv[4].onmouseover=function(){ startmove(this,'borderWidth',100); } oDiv[4].onmouseout=function(){ startmove(this,'borderWidth',1); } oDiv[5].onmouseover=function(){ startmove(this,'left',500); } oDiv[5].onmouseout=function(){ startmove(this,'left',0); } } function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ return getComputedStyle(obj,false)[name]; } } function startmove(obj,attr,iTarget){ clearInterval(obj.time); obj.time=setInterval(function(){ var cur=0; if(attr=='opacity'){ cur=Math.round(parseFloat(getStyle(obj,attr))*100);//Math.round(value);方法实现小数的四舍五入 } else{ cur=parseInt(getStyle(obj,attr));} var speed=(iTarget-cur)/20; speed=speed>=0?Math.ceil(speed):Math.floor(speed); if(iTarget==cur){ clearInterval(obj.time); } 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> ///////////////////////////////////////////// 4 startmove(obj,attr,iTarget,fn) 链式运动框架 //////////////////////////////////////////////////// /******************************获取行间函数**************************************/ function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ return getComputedStyle(obj,false)[name]; } } /******************************链式运动函数****************************************************/ function startmove(obj,attr,iTarget,fnEnd){//另外加一个函数的参数fnEnd clearInterval(obj.time); obj.time=setInterval(function(){ var cur=0; if(attr=='opacity'){ cur=Math.round(parseFloat(getStyle(obj,attr))*100);//Math.round(value);方法实现小数的四舍五入 } else{ cur=parseInt(getStyle(obj,attr));} var speed=(iTarget-cur)/20; speed=speed>=0?Math.ceil(speed):Math.floor(speed); if(iTarget==cur){ clearInterval(obj.time); 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 type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ startmove(oDiv,'width',800,function(){ startmove(oDiv,'height',500,function(){ startmove(oDiv,'opacity',100); }); }); } oDiv.onmouseout=function(){ startmove(oDiv,'opacity',30,function(){ startmove(oDiv,'height',100,function(){ startmove(oDiv,'width',100); }); }); } } </script> } /////////////////////////////////////////////////// 5 startmove(obj,json,fn) 完美运动框架 /////////////////////////////////////////// function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ return getComputedStyle(obj,false)[name]; } } //startmove(oDiv,{width:400,height:400}) function startmove(obj,json,fnEnd){ clearInterval(obj.time); obj.time=setInterval(function(){ var bStop=true;//假设所有的值都已经到了 for(var attr in json) { var cur=0; if(attr=='opacity'){ cur=Math.round(parseFloat(getStyle(obj,attr))*100);//Math.round(value);方法实现小数的四舍五入 } else{ cur=parseInt(getStyle(obj,attr));} var speed=(json[attr]-cur)/20; speed=speed>=0?Math.ceil(speed):Math.floor(speed); if(cur!=json[attr]) bStop=false; if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(cur+speed)+')'; obj.style.opacity=(cur+speed)/100; } else{obj.style[attr]=cur+speed+'px';} } if(bStop){ clearInterval(obj.time); if(fnEnd)fnEnd(); } },30); }
相关文章推荐
- JavaScript动画之完美运动框架
- 推荐几款制作网页滚动动画的 JavaScript 库
- Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
- js动画(完美运动框架)
- 基于Dreamweaver的网页制作学习5----框架
- JavaScript运动框架 链式运动到完美运动(五)
- 推荐几款制作网页滚动动画的 JavaScript 库
- 转载:让网页抖的更加高端-javascript运动算法及greensock框架介绍 [
- JavaScript运动框架(三):多物体任意值运动
- 47、JavaScript的运动----完美运动框架的应用----放大缩小图片的实现(布局转换的实现)
- 推荐几款制作网页滚动动画的 JavaScript 库
- Javascript 完美运动框架——逐行分析代码,让你轻松了解运动的原理
- [学习笔记]JavaScript基础--完美运动框架
- JavaScript运动框架(五):链式运动到完美运动
- javascript中的动画的实现以及运动框架的编写(1)
- Javascript 完美运动框架——逐行分析代码,让你轻松了解运动的原理
- [学习笔记]JavaScript基础--任意值运动框架
- Javascript 完美运动框架——逐行分析代码,让你轻松了解运动的原理(转)
- JavaScript运动框架 多物体任意值运动(三)
- 46、JavaScript的运动----完美运动框架的实现----注意运动停止的判断的技巧