原生js實現類似彈窗抖動效果

2019-11-20 12:47:17

字體：大中小

來源：轉載

供稿：網友

先在之前做的抖動窗口上做了點動作無限變色

<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    div{text-align: center;line-height: 150px;font-weight: bold;}    #dv{width: 300px;height: 150px;position: absolute;left: 200px;top: 100px;background: red;}    #dv2{width: 300px;height: 150px;position: absolute;left: 600px;top: 100px;background: yellow;}  </style>  <script>      window.onload=function(){        // 得到0--255的隨機數        function getRandNumber(rmin,rmax){          var cha = rmax-rmin;          var rand = Math.random();          return rmin+Math.round(cha*rand)        }        var oDv = document.getElementById('dv')        var oDv2 = document.getElementById('dv2')        //抖動需要獲取的值一個數組        var arr=[];                 // 隨機變色        setInterval(function(){          var arr2 = [            getRandNumber(0,255),            getRandNumber(0,255),            getRandNumber(0,255)            ];           oDv.style.backgroundColor="rgb("+arr2[0]+","+arr2[1]+","+arr2[2]+")"        },130)         // 抖動獲取值放到數組中          for(var i=20;i>0;i-=2){            arr.push(i,-i)          }        // 第一個盒子抖動        oDv.onclick=function(){          sb(oDv,'left',function(){            sb(oDv,'top')          })                   }        // 第二個盒子抖動        oDv2.onclick=function(){          sb(oDv2,'left',function(){            sb(oDv2,'top')          })                   }        // 抖動        function sb(obj,attr,fnEnd){          var timer=null;          var num=0;               clearInterval(timer)          timer=setInterval(function(){          obj.style[attr]=parseInt(getStyle(obj,attr))+arr[num]+'px'          num++;          if(num===arr.length){            clearInterval(timer)            fnEnd&&fnEnd()            obj.innerHTML='我是'+getStyle(obj,'backgroundColor')+'色'            //alert(1)          }                       },50)         }             function getStyle(obj,attr){          return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]        }      };  </script></head><body>  <div id="dv">點我呀</div>  <div id="dv2">點我呀</div></body></html>

演示圖：