多物體任意值運動框架

1、多物體運動框架:(1)多物體之間共用一個定時器會卡?解決辦法:爲每一個對象分別加定時器自定義屬性

2、.多物體單個任意值運動框架

<style>
        div{width: 100px;height: 50px;background: red;margin-top: 10px;
            font-size: 14px;border:2px solid #000000;}
    </style>
    <script>
        window.onload=function(){
            var aDiv=document.getElementsByTagName('div');
            var i=null;
            for(i=0;i<aDiv.length;i++) {
                if(i==0){
                aDiv[i].timer=null;
                aDiv[i].onmouseover = function () {
                    startMove(this,'width',300);
                };
                /*aDiv[i].onmouseout = function () {
                    startMove(this,width,100);
                };}*/}else if(i==1){
                    aDiv[i].timer=null;
                    aDiv[i].onmouseover = function () {
                        startMove(this,'height',200);
                    };
                } else{
                    aDiv[i].timer=null;
                    aDiv[i].onmouseover = function () {
                        startMove(this,'fontSize',30);
                    };
                }
            }
        };
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
        function startMove(obj,attr,iTarget){
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var iCur=parseInt(getStyle(obj,attr));
                var iSpeed=(iTarget-iCur)/8;
                iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                if(iTarget==iCur){
                    clearInterval(obj.timer);
                }else{
                    obj.style[attr]=iCur+iSpeed+'px';
                }
            },30);
        }
    </script>
</head>
<body>
<div></div>
<div></div>
<div>豆腐腦</div>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章