原生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瀑布流原理实现图片滚动加载
Mar 10 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
php模板之Phpbean的目录结构
2008/01/10 PHP
php实现aes加密类分享
2014/02/16 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
js控制框架刷新
2008/08/01 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
python实现两个dict合并与计算操作示例
2019/07/01 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
贷款委托书范本
2014/04/08 职场文书
生产车间标语
2014/06/11 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android