先在之前做的抖动窗口上做了点动作 无限变色
<!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"dv">点我呀</div> <div id="dv2">点我呀</div> </body> </html>
演示图:
以上所述就是本文的全部内容了,希望大家能够喜欢。
标签:
js,弹窗抖动
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“原生js实现类似弹窗抖动效果”评论...
更新动态
2024年05月10日
2024年05月10日
- 群星《妖神令 影视原声专辑》[320K/MP3][85.23MB]
- 逆水寒手游五子棋第二十三关怎么过 逆水寒手游残局攻略大全
- 逆水寒手游五子棋第二十二关怎么过 逆水寒手游残局攻略大全
- 欢乐钓鱼大师最稀有的鱼是什么 欢乐钓鱼大师最稀有的鱼攻略
- ABC唱片-《蔡琴.三十周年纪念版》6N纯银镀膜[WAV+CUE]
- ABC唱片-《汉斯.德斯辛克.心中布鲁斯》6N纯银镀膜[WAV+CUE]
- 群星《DJ·夜色魅影HQ》头版限量[低速原抓WAV+CUE]
- 《如龙》桐生声优被警察拦下盘问:你有犯罪记录吗?
- 游族2023年净利润0.91亿元 《少年西游记2》即将公测
- 曝快手北京游戏事业部全数被裁 项目测试数据未达标
- 李雨寰.2012-我可是天使【有凰音乐】【WAV+CUE】
- 刘美君.1991-听我细诉【BMG】【WAV+CUE】
- 群星.2016-滚石爱情故事3CD【滚石】【WAV+CUE】
- 欢乐钓鱼大师怎么解锁全地图 欢乐钓鱼大师全地图解锁方法
- 欢乐钓鱼大师锦标赛在哪里进 欢乐钓鱼大师锦标赛入口位置介绍