原生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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
input的focus方法使用
Mar 13 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
Vue实现简单的跑马灯
May 25 Javascript
js实现九宫格布局效果
May 28 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
解析php中反射的应用
2013/06/18 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
Underscore源码分析
2015/12/30 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
老公给老婆的道歉信
2014/01/10 职场文书
贷款委托书
2014/08/01 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
大学生创业事迹材料
2014/12/30 职场文书
体育部部长竞选稿
2015/11/21 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
详细了解java监听器和过滤器
2021/07/09 Java/Android
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
python中tkinter复选框使用操作
2021/11/11 Python
警用民用对讲机找不同
2022/02/18 无线电