javascript|JS动画封装 javascript|特效

简单的运动函数

var demo1=document.getElementById("demo1"); demo1.onmouseover=function(){ startMove(0); } demo1.onmouseout=function(){ startMove(-320); } var timer//全局变量 function startMove(target){ clearInterval(timer)//一开始要清除所有的定时器避免累加改变速度 var demo1=document.getElementById("demo1"); timer=setInterval(function(){ //匀速运动 /*var speed=0; if(demo1.offsetLeft>target){ speed=-10; }else{ speed=10; }*/ //变速运动 var speed=(target-demo1.offsetLeft)/10; //形成一个减速效果 speed=speed>0?Math.ceil(speed):Math.floor(speed)//进行取整，保证最后不会有剩余 if(demo1.offsetLeft==target){ clearInterval(timer); }else{ demo1.style.left=demo1.offsetLeft+speed+'px'; }},30) }

效果图

文章图片

第一张图实在鼠标经过时滑动出来的
【javascript|JS动画封装】图形变化和透明度变化JS代码

这个例子是一个同步运动 var li=document.getElementById('li'); li.onmouseover=function(){ changeShape(li,{width:401,height:300,opacity:30}); } li.onmouseout=function(){ changeShape(li,{width:400,height:200,opacity:100}); //这里面的{}为json格式} //changeShape(obj,{attr1:target1,attr2:target2},fn) function changeShape(obj,json,fn){ var flag=true; //假设所有运动到达目标值，确保不会有一个停止之后导致其他运动停止（同步运动） clearInterval(obj.timer); obj.timer=setInterval(function(){ for(attr in json){//这是json调取的格式，可以自行学习下 //这句话就是遍历其中属性 var cur=0; if(attr=='opacity'){ //先变成浮点数，再进行四舍五入，因为数字变为浮点数时计算机无法准确取得，所以需要四舍五入 var cur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ var cur=parseInt(getStyle(obj,attr)) } //速度设定 var speed=(json[attr]-cur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //运动判断 if(cur!=json[attr]){ flag=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(flag){ clearInterval(timer) //回调函数，用来链式运动的，一个接着一个的运动 if(fn){ fn(); } }},30) }