原生射流研究…实现类似弹窗抖动效果

先在之前做的抖动窗口上做了点动作无限变色

！doctype html html lang=' en ' head meta charset=' UTF-8 ' title文档/title style div { text-align : center；线高： 150像素；字体粗细：粗体；} # dv { width: 300px高度： 150像素；绝对位置：left: 200pxtop: 100px背景：红色；} # dv2 {宽度： 300px高度： 150像素；绝对位置：left: 600pxtop: 100px背景：黄色；}/样式脚本window.onload=function(){ //得到0 - 255的随机数函数getRandNumber(rmin，rmax){ var cha=rmax-rmin；var rand=数学。random()；返回rmin数学round(cha * rand)} var oDv=document。getelementbyid(' dv ')var ODv 2=document。getelementbyid(' dv 2 ')//抖动需要获取的值一个数组var arr=[]；//随机变色setInterval(function(){ var arr 2=[getRandNumber(0，255)，getRandNumber(0，255)，getRandNumber(0，255)]；odv。风格。background COlOr=' RGB(' arr 2[0]'，' arr2[1]'，' arr2[2] ')' }，130) //抖动获取值放到数组中for(var I=20；i0；i-=2){ arr.push(i，-i) } //第一个盒子抖动oDv.onclick=function(){ sb(oDv，' left '，function(){ sb(oDv，' top ' })}//第二个盒子抖动odv 2。onclick=function(){ sb(oDv2，' left '，function(){ sb(oDv2，' top ' })}//抖动函数sb(obj，attr，Fnend){ var timer=null；var num=0；clearInterval(timer)timer=setInterval(function(){ obj。style[attr]=parsent(getStyle(obj，attr))arr[num]' px ' num；if(num===arr。length){ clearInterval(timer)fnendfennd()obj。innerhtml='我是getStyle(obj，‘background color’)色//alert(1) } }，50)函数getStyle(obj，attr){ return obj.currentStyle？物体。当前样式[attr]: get computed style(obj)[attr]} }；/script/headbody div id='dv '点我呀/div div id='dv2 '点我呀/div/body/html演示图：

以上所述就是本文的全部内容了，希望大家能够喜欢。