原生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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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检测图片木马多进制编程实践
2013/04/11 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
Javascript中replace()小结
2015/09/30 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
Python 返回汉字的汉语拼音
2009/02/27 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
贷款担保书范文
2014/05/13 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
公司员工安全协议书
2014/11/21 职场文书
介绍信格式
2015/01/30 职场文书
商场收银员岗位职责
2015/04/07 职场文书
护理自荐信
2019/05/14 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript