原生js实现类似弹窗抖动效果

更新时间：2015年04月02日 11:13:07 投稿：hebedich

这篇文章主要介绍了原生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;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兼容标准的表格变色效果
符合标准的表格变色的js代码
2008-06-06
浅谈Javascript嵌套函数及闭包
这篇文章其实是要讲闭包的一些初级应用，但是为了将闭包，我们还是从嵌套函数开始说吧，纵使所有的JavaScript函数都可以说是闭包，但是只有当一个嵌套函数被导出到它所定义的作用域之外时，这种闭包才是有趣的。
2010-11-11
javascript触发模拟鼠标点击事件
这篇文章主要介绍了javascript触发模拟鼠标点击事件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-06-06
JavaScript遍历数组和对象的元素简单操作示例
这篇文章主要介绍了JavaScript遍历数组和对象的元素简单操作,结合实例形式分析了javascript数组与对象元素遍历相关操作技巧与注意事项,需要的朋友可以参考下
2019-07-07
微信小程序实现Session功能及无法获取session问题的解决方法
这篇文章主要介绍了微信小程序实现Session功能及无法获取session问题的解决方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
JS 的应用开发初探(mootools)
昨天在公司内部做了一个小小的技术分享，就 js 应用开发方面跟大家谈了一点自己的心得，最近因为工作关系花在这上面的时间较多也颇有些收获，写在这里备忘。
2009-12-12
js实现3D旋转相册
这篇文章主要为大家详细介绍了js实现3D旋转相册，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
原生javascript中this几种常见用法总结
这篇文章主要介绍了原生javascript中this几种常见用法,结合实例形式总结分析了JavaScript中this的功能、常见用法及操作注意事项,需要的朋友可以参考下
2020-02-02
javascript相等运算符与等同运算符详细介绍
不管是java、c++、php都有相等运算符与等同运算符，当然javasript也不例外，下面介绍一下
2013-11-11
JavaScript经典案例之简易计算器
这篇文章主要为大家详细介绍了JavaScript经典案例之简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08