<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js循环运动</title> <style> div{ width:150px; height:150px; background-color:#F66; border:3px #009 solid; position:absolute; top:80px; } </style> <script> var oDiv=document.getElementsByTagName("div"); var oButton = document.getElementsByTagName("input"); //设置全局变量分别为宽度 高度 透明度 var flag=0; var w1=150,w2=300,h1=150,h2=300,o1=0,o2=100; window.onload=function(){ oButton[0].onclick=function(){ if(flag==0){ mainFun1(); } else { mainFun2(); } } oButton[1].onclick=function(){ stopFun(oDiv[0]); stopFun(oDiv[1]); } } //重置函数 function resetFun(){ oDiv[0].style.width=150 + "px"; oDiv[0].style.height=150 + "px"; oDiv[0].style.filter="alpha(opacity=100)"; oDiv[0].style.opacity=1; oDiv[1].style.width=150 + "px"; oDiv[1].style.height=150 + "px"; oDiv[1].style.filter="alpha(opacity=100)"; oDiv[1].style.opacity=1; } //主函数 function mainFun1(){ //var oDiv=document.getElementsByTagName("div"); //这里面参数不能用this startMove(oDiv[0],"width",w2,function(){ startMove(oDiv[0],"height",h2,function(){ startMove(oDiv[0],"opacity",o1,function(){ startMove(oDiv[1],"width",w2,function(){ startMove(oDiv[1],"height",h2,function(){ startMove(oDiv[1],"opacity",o1,function(){ /* resetFun();*/ mainFun2(); }); }); }); }); }); }); } function mainFun2(){ //var oDiv=document.getElementsByTagName("div"); //这里面参数不能用this startMove(oDiv[1],"opacity",o2,function(){ startMove(oDiv[1],"height",h1,function(){ startMove(oDiv[1],"width",w1,function(){ startMove(oDiv[0],"opacity",o2,function(){ startMove(oDiv[0],"height",h1,function(){ startMove(oDiv[0],"width",w1,function(){ /* resetFun();*/ mainFun1(); }); }); }); }); }); }); } //停止运动函数分离 function stopFun(obj){ clearInterval(obj.timer); } //返回元素值 function getStyle(obj,attr){ if(obj.currentSyle){ return obj.currentStyleattr[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } function startMove(obj,attr,iTarget,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ if(attr=="opacity"){ var iCur=parseInt(parseFloat(getStyle(obj,attr)*100)); } else{ var iCur=parseInt(getStyle(obj,attr)); } var iSpeed=(iTarget-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iCur==iTarget){ stopFun(obj); if(fn) fn(); } else { if(attr=="opacity"){ iCur+=iSpeed; obj.style.filter="alpha(opacity="+iCur+")"; obj.style.opacity=iCur/100; } else{ iCur+=iSpeed; obj.style[attr]=iCur+"px"; } } if(obj==oDiv[1] && parseInt(getStyle(obj,'opacity')*100)==o1){ flag=1; } else if(obj==oDiv[0] && parseInt(getStyle(obj,'width'))==w1){ /* alert(1);*/ flag=0; } document.title = obj.style[attr]; },30); } </script> </head> <body> <input type = "button" value="开始运动" /> <input type = "button" value="停止运动" /> <div id="div1"> <span>1</span> </div> <div style="top:80px; left:550px; background-color:#0F6"> <span>2</span> </div> </body> </html>