JS 动画

news/2024/7/24 12:16:50

纵向展开

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: rgb(9, 175, 9);
            position: fixed;
            top: 100px;
            left: 0px;
            overflow: hidden;
        } 
        button{
            height: 30px;
            width: 50px;
            margin: 30px;
        }
 
    </style>
</head>
<body>
    <button>点击</button>
    <div> 
    </div>
 
<script>
      var oBtn=document.querySelector('button');
        var oDiv=document.querySelector('div');
        oBtn.addEventListener('click',function(){
            var speed=0;
            var time=setInterval(function(){
                speed+=10;
                oDiv.style.height=speed+'px';
                if(speed==600){
                    clearInterval(time);
                }
            },30)
        }) 
<script>

在这里插入图片描述

横向展开

 var oBtn=document.querySelector('button');
        var oDiv=document.querySelector('div');
        oBtn.addEventListener('click',function(){
            var speed=0;
            var time=setInterval(function(){
                speed+=10;
                oDiv.style.width=speed+'px';
                if(speed==500){
                    clearInterval(time);
                }
            },30)
        })

在这里插入图片描述

斜向展开

        var oBtn = document.querySelector('button');
        var oDiv = document.querySelector('div'); 
        oBtn.addEventListener('click' , function(){ 
            var speed = 0; 
            var time = setInterval(function(){ 
                speed += 10;  
                oDiv.style.width= speed + 'px'; 
                oDiv.style.height= speed + 'px'; 
                if(speed == 500){
                    clearInterval(time);
                }                
            } , 30)  
        })

水平移动

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: rgb(9, 175, 9);
            position: fixed;
            top: 100px;
            left: 0px;
            overflow: hidden;
            margin-left: 30px;
        } 
        button{
            height: 30px;
            width: 50px;
            margin: 30px;
        }
 
    </style>
</head>
<body>
    <button>点击</button>
    <div> 
    </div>
 
<script> 
        var oBtn = document.querySelector('button');
        var oDiv = document.querySelector('div');
 
        oBtn.addEventListener('click' , function(){
            // 定义的初始值
            var speed = 0;
            // 定时器
            var time = setInterval(function(){
                // 每次初始值,增加一个数值
                speed += 10;
                // 将这个数值定义为定位的数值
                oDiv.style.left = speed + 'px';
                // 当数值达到规定的数值时,清除定时器,终止执行
                // 运动也就终止了
                if(speed == 500){
                    clearInterval(time);
                }                
            } , 30) 
        }) 
   </script>

在这里插入图片描述

纵向移动

 var oBtn=document.querySelector('button');
        var oDiv=document.querySelector('div');
        oBtn.addEventListener('click',function(){
            var speed=0;
            var time=setInterval(function(){
                speed+=20;
                oDiv.style.top=speed+'px';
                if(speed==500){
                    clearInterval(time);
                }
            },30)
        })

斜向移动

 var oBtn=document.querySelector('button');
        var oDiv=document.querySelector('div');
        oBtn.addEventListener('click',function(){
            var speed=0;
            var time=setInterval(function(){
                speed+=20;
                oDiv.style.top=speed+'px';
                oDiv.style.left=speed+'px';
                if(speed==500){
                    clearInterval(time);
                }
            },30)
        })