原生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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
JS数组的常用10种方法详解
May 08 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
php compact 通过变量创建数组
2016/11/15 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
浅谈Python协程
2020/06/17 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
青年创业培训欢迎词
2014/01/08 职场文书
好人好事事迹材料
2014/02/12 职场文书
秋游活动策划方案
2014/02/16 职场文书
期中考试反思800字
2014/05/01 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
工作证明格式范文
2015/06/15 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js
Python代码实现双链表
2022/05/25 Python