原生js实现类似弹窗抖动效果
网络编程 2021-07-04 21:47www.168986.cn编程入门
这篇文章主要介绍了原生js实现类似弹窗抖动效果的相关资料,推荐给大家,需要的朋友可以参考下
先在之前做的抖动窗口上做了点动作 无限变色
<!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;: 100px;background: red;} #dv2{width: 300px;height: 150px;position: absolute;left: 600px;: 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,'') }) } // 第二个盒子抖动 oDv2.onclick=function(){ sb(oDv2,'left',function(){ sb(oDv2,'') }) } // 抖动 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>
演示图:
以上所述就是本文的全部内容了,希望大家能够喜欢。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程