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


Posted in Javascript onApril 02, 2015

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

<!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实现类似弹窗抖动效果

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

Javascript 相关文章推荐
javascript 网页跳转的方法
Dec 24 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
小程序云开发之用户注册登录
May 18 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 #Javascript
原创jQuery弹出层插件分享
Apr 02 #Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 #Javascript
Javascript获取表单名称(name)的方法
Apr 02 #Javascript
如何改进javascript代码的性能
Apr 02 #Javascript
JavaScript获得表单target属性的方法
Apr 02 #Javascript
AngularJS快速入门
Apr 02 #Javascript
You might like
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
Python科学计算包numpy用法实例详解
2018/02/08 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
weblogic面试题
2016/03/07 面试题
C#面试常见问题
2013/02/25 面试题
酒店管理专业毕业生推荐信
2013/11/10 职场文书
物业总经理岗位职责
2014/02/28 职场文书
公务员诚信承诺书
2014/05/26 职场文书
重阳节标语大全
2014/10/07 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
体育教师研修感悟
2015/11/18 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
V Rising 服务器搭建图文教程
2022/06/16 Servers