js实现多物体运动 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            margin: 20px;
            float: left;
            background: red;
            border: blue 1px solid;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2')
                oDiv.onmouseover = function(){
                    startMove(this,"height",300);
                };
                oDiv.onmouseout = function(){
                    startMove(this,"height",100);
                };
                oDiv2.onmouseover = function(){
                    startMove(this,"width",400);
                };
                oDiv2.onmouseout = function(){
                    startMove(this,"width",200);
                }
        }
        function getStyle(obj,name){
            if (obj.currentStyle) {
                return obj.currentStyle[name];
            } else {
                return getComputedStyle(obj,false)[name]
            }
        }
        //var alpha = 30;所有的东西都不能公用
        function startMove (obj,attr,iTarget) {
            clearInterval(obj.time);
            obj.time = setInterval(function(){
                var cur = parseInt(getStyle(obj,attr));
                var speed = (iTarget-cur)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                if (cur == iTarget) {
                    clearInterval(obj.time);
                } else {
                   obj.style[attr] = cur+speed+'px';
                } 
            },30)
        }
    </script>
</head>
<body>
    <div id="div1">变高</div>
    <div id="div2">变宽</div>
</body>
</html>

 

posted @ 2020-05-15 11:00  YH丶浩  阅读(174)  评论(0)    收藏  举报