快捷導(dǎo)航

原生js實現(xiàn)類似彈窗抖動效果

更新時間：2015年04月02日 11:13:07 投稿：hebedich

這篇文章主要介紹了原生js實現(xiàn)類似彈窗抖動效果的相關(guān)資料,推薦給大家，需要的朋友可以參考下

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

<!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的隨機(jī)數(shù)
        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')
        //抖動需要獲取的值一個數(shù)組
        var arr=[];
         
        // 隨機(jī)變色
        setInterval(function(){
          var arr2 = [
            getRandNumber(0,255),
            getRandNumber(0,255),
            getRandNumber(0,255)
            ];
 
          oDv.style.backgroundColor="rgb("+arr2[0]+","+arr2[1]+","+arr2[2]+")"
        },130) 
        // 抖動獲取值放到數(shù)組中
          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>

演示圖：