原生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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
python回调函数用法实例分析
2015/05/09 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Numpy之reshape()使用详解
2019/12/26 Python
重构Python代码的六个实例
2020/11/25 Python
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
高一生物教学反思
2014/01/17 职场文书
目标管理责任书
2014/04/15 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
房地产项目合作意向书
2015/05/08 职场文书
第一书记观后感
2015/06/08 职场文书
教师远程研修感悟
2015/11/18 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis