js中颜色淡入淡出及div大小的变化

最新推荐文章于 2022-08-18 11:55:26 发布

csharp_wuxin

最新推荐文章于 2022-08-18 11:55:26 发布

阅读量841

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/csharp_wuxin/article/details/52439360

版权

 <style>
        #btn1{
            width: 50px;
            height: 50px;
        }
        #btn2{
            width: 50px;
            height: 50px;
        }
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            border-radius: 50%;
            background: deepskyblue;
        }
    </style>
</head>
    <body>
    <button id="btn1">开始</button>
    <button id="btn2">停止</button>
    <div id="box"></div>

    </body>
    <script>
        var oBtn1=document.getElementById("btn1");
        var oBtn2=document.getElementById("btn2");
        var oBox=document.getElementById("box");
        var timer=null;
        var id1=null;
        var alpha=0.3;


        oBtn1.onclick=function(){
            id1=setInterval(move,90)


        }
        oBtn2.onclick=function(){
            clearInterval(id1);
        }

        oBox.onmouseover=function(){
            fadeInOut(0.1);
            oBox.style.width="150px";
            oBox.style.height="150px";
        }

        oBox.onmouseout=function(){
            fadeInOut(-0.1)
            oBox.style.width="100px";
            oBox.style.height="100px";

        }

       function move(){
           oBox.style.left=oBox.offsetLeft+10+"px";
       }


        function fadeInOut(value){
            clearInterval(timer);
            var timer=setInterval(function(){
                alpha+=value;
                oBox.style.opacity=alpha;
                if(alpha>=1||alpha<=0.3){
                    clearInterval(timer);
                }

            },30)


        }
    </script>