您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
原生js实现类似弹窗抖动效果
作者：佚名 责任编辑：admin 更新时间：2022-06-22
先在之前做的抖动窗口上做了点动作 无限变色
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>演示图：
- 上一个程序编程： Javascript代码实现仿实例化类
- 下一个程序编程： javascript中call和apply的用法示例分析
