原生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 相关文章推荐
jquery.validate分组验证代码
Mar 17 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
JS作用域深度解析
Dec 29 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
Vue项目中ESlint规范示例代码
Jul 04 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
小偷PHP+Html+缓存
2006/11/25 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
python实现邮件发送功能
2019/08/10 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
光声世纪笔试题目
2012/08/25 面试题
计算机专业个人简短的自我评价
2013/10/23 职场文书
经典英文广告词
2014/03/18 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
政治学求职信
2014/06/03 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python