萬盛學電腦網 >> 腳本專題 >> javascript >> 原生js實現類似彈窗抖動效果

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 <!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>

演示圖：

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