欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js實現(xiàn)類似彈窗抖動效果

 更新時間:2015年04月02日 11:13:07   投稿:hebedich  
這篇文章主要介紹了原生js實現(xiàn)類似彈窗抖動效果的相關(guān)資料,推薦給大家,需要的朋友可以參考下

先在之前做的抖動窗口上做了點動作 無限變色

<!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的隨機(jī)數(shù)
        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')
        //抖動需要獲取的值一個數(shù)組
        var arr=[];
         
        // 隨機(jī)變色
        setInterval(function(){
          var arr2 = [
            getRandNumber(0,255),
            getRandNumber(0,255),
            getRandNumber(0,255)
            ];
 
          oDv.style.backgroundColor="rgb("+arr2[0]+","+arr2[1]+","+arr2[2]+")"
        },130) 
        // 抖動獲取值放到數(shù)組中
          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>

演示圖:

以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。

相關(guān)文章

  • js兼容標(biāo)準(zhǔn)的表格變色效果

    js兼容標(biāo)準(zhǔn)的表格變色效果

    符合標(biāo)準(zhǔn)的表格變色的js代碼
    2008-06-06
  • 淺談Javascript嵌套函數(shù)及閉包

    淺談Javascript嵌套函數(shù)及閉包

    這篇文章其實是要講閉包的一些初級應(yīng)用,但是為了將閉包,我們還是從嵌套函數(shù)開始說吧,縱使所有的JavaScript函數(shù)都可以說是閉包,但是只有當(dāng)一個嵌套函數(shù)被導(dǎo)出到它所定義的作用域之外時,這種閉包才是有趣的。
    2010-11-11
  • javascript觸發(fā)模擬鼠標(biāo)點擊事件

    javascript觸發(fā)模擬鼠標(biāo)點擊事件

    這篇文章主要介紹了javascript觸發(fā)模擬鼠標(biāo)點擊事件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-06-06
  • JavaScript遍歷數(shù)組和對象的元素簡單操作示例

    JavaScript遍歷數(shù)組和對象的元素簡單操作示例

    這篇文章主要介紹了JavaScript遍歷數(shù)組和對象的元素簡單操作,結(jié)合實例形式分析了javascript數(shù)組與對象元素遍歷相關(guān)操作技巧與注意事項,需要的朋友可以參考下
    2019-07-07
  • 微信小程序?qū)崿F(xiàn)Session功能及無法獲取session問題的解決方法

    微信小程序?qū)崿F(xiàn)Session功能及無法獲取session問題的解決方法

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)Session功能及無法獲取session問題的解決方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • JS 的應(yīng)用開發(fā)初探(mootools)

    JS 的應(yīng)用開發(fā)初探(mootools)

    昨天在公司內(nèi)部做了一個小小的技術(shù)分享,就 js 應(yīng)用開發(fā)方面跟大家談了一點自己的心得,最近因為工作關(guān)系花在這上面的時間較多也頗有些收獲,寫在這里備忘。
    2009-12-12
  • js實現(xiàn)3D旋轉(zhuǎn)相冊

    js實現(xiàn)3D旋轉(zhuǎn)相冊

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)3D旋轉(zhuǎn)相冊,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • 原生javascript中this幾種常見用法總結(jié)

    原生javascript中this幾種常見用法總結(jié)

    這篇文章主要介紹了原生javascript中this幾種常見用法,結(jié)合實例形式總結(jié)分析了JavaScript中this的功能、常見用法及操作注意事項,需要的朋友可以參考下
    2020-02-02
  • javascript相等運(yùn)算符與等同運(yùn)算符詳細(xì)介紹

    javascript相等運(yùn)算符與等同運(yùn)算符詳細(xì)介紹

    不管是java、c++、php都有相等運(yùn)算符與等同運(yùn)算符,當(dāng)然javasript也不例外,下面介紹一下
    2013-11-11
  • JavaScript經(jīng)典案例之簡易計算器

    JavaScript經(jīng)典案例之簡易計算器

    這篇文章主要為大家詳細(xì)介紹了JavaScript經(jīng)典案例之簡易計算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08

最新評論