js 多物体运动

程序员朝宇技术 2022年11月23日

0 收藏 625 点赞 2,227 浏览 1385 个字

<!doctype html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>未命题</title>
        <style>
            *{margin: 0;
                padding: 0;
            }
            #div1{
                height: 200px;
                width: 150px;
                background: red;
                position:absolute;
                top:50px;
                left: -150px;
            }
            #div2{
                height: 50px;
                width: 20px;
                background: black;
                color: white;
                position:absolute;
                top:100px;
                right:-20px;
                line-height: 25px;
                cursor: pointer;
            }
            img{
            margin-left: 200px;
            opacity: 0.3;
            alpha(opacity = 30);
            }
        </style>
        <script>
            window.onload = function ()
            {
                odiv1 = document.getElementById('div1');
                odiv2 = document.getElementById('div2');
                oimg = document.getElementById('img1');                odiv1.onmouseover= function ()
                {
                    startMove(this,'left',0,10);
                }                odiv1.onmouseout = function ()
                {
                    startMove(this,'left',-150,-10);
                }                oimg.onmouseover = function ()
                {                    startMove(this,'opacity',100,10);
                }                oimg.onmouseout = function ()
                {
                    startMove(this,'opacity',30,-10);
                }                function startMove (obj,attr,goal,speed)
                {
                    clearInterval(obj.timer);
                    var icur = 0;                    obj.timer = setInterval(function(){
                        if(attr == 'opacity')
                        {
                            icur = Math.round(css(obj,'opacity')*100);
                        }
                        else
                        {
                            icur = parseInt(css(obj,attr))
                        }                        if(icur == goal)
                        {
                            clearInterval(obj.timer);
                        }
                        else
                        {
                            if(attr == 'opacity')
                            {
                                obj.style.opacity = (icur + speed )/100;
                                obj.style.filter = 'alpha(opacity = '+ (icur + speed ) +')';
                            }
                            else
                            {
                                obj.style[attr] = icur + speed + 'px';
                            }
                        }
                    },30);
                }                function css(obj,attr)
                {
                    if(obj.currentStyle)
                        return obj.currentStyle[attr];
                    else
                        return getComputedStyle(obj,false)[attr];
                }            }
        </script>
    </head>
    <body>        <div id="div1"><div id="div2">分享</div></div>
        <img id="img1" src = "img/1.jpg">    </body>    </html>