技術標籤：前端jscsshtmles6javascript

HTML+JS實現div動畫效果之左右移動（反覆橫跳）

點選動起來實現移動

再次點選動起來返回

首先簡簡單單建立個input按鈕和div盒子

 <input type="button" value="動起來" id="btn">
    <div id="box"></div>

再來個看得過去的css修飾一下

 <style>
        * {
            margin: 0;
            padding
 
: 0;
        }

        #box {
            width: 50px;
            height: 50px;
            background-color: #ff3040;
            position: absolute;
            margin-top: 20px;
        }
    </style>

下面就是重要的js部分，沒它動不了~

<script>
//先獲取btn和box
    var btn=document.getElementById('btn');
    var
 
 box=document.getElementById('box');
    //給box的x軸距離賦值
    let i=box.offsetLeft;
   //給計時器命名
    let timer;
    //加速度
    let step=10;
   //封裝使box移動的函式
    let myfunction={
    //向前移動
        go:()=>{ 
            let tag=600;//這個是控制最大移動的距離
            if(timer){
               clearInterval(timer);
               timer=
 
null;
           }//這個是清除移動後的計時器
           timer= setInterval(()=>{
                if(i>tag){
                    box.style.left=tag;//設定如果div移動的距離大於最大距離就等於最大的
                    clearInterval(timer);
                }else{
                    i+=step;
                box.style.left=i +'px';
                } },25)
        },
        //返回的函式
        back:()=>{
            let tag=0;
            if(timer){
               clearInterval(timer);
               timer=null;
           }timer= setInterval(()=>{
                if(i<tag){
                    box.style.left=tag;
                    clearInterval(timer);
                }else{
                    i-=step;
                box.style.left=i +'px';
                } },25)
        }

    }
        let s =0;
    btn.onclick=()=>{
    //設定一個簡單的if使一個input按鈕可以完成反覆橫跳
                if(s==0){ s++;
                 myfunction.go();
            }else{
                myfunction.back();
                s--;
            } 
    }
</script>