<!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>