js循环运动效果实现

<!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>
相关阅读:
DB2 中like的通配符以及escape关键字定义转义字符的使用
 Java编译后产生class文件的命名规则
 在Servlet的GenericServlet类中为什么有两个init()方法
 Java Web开发笔记
 EL表达式
 将NSString转换编码集变为GBK或GB2312
转，ios开源程序集
 整理被appstore 拒绝审核通过的原因
 在程序中如何把两张图片合成为一张图片
 object c 操作date类型
原文地址：https://www.cnblogs.com/hsqdboke/p/2732584.html