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

JavaScript運(yùn)動框架 鏈?zhǔn)竭\(yùn)動到完美運(yùn)動(五)

 更新時間:2022年05月08日 10:48:57   作者:GY_U_YG  
這篇文章主要為大家詳細(xì)介紹了JavaScript運(yùn)動框架的第五部分,鏈?zhǔn)竭\(yùn)動到完美運(yùn)動,具有一定的參考價值,感興趣的小伙伴們可以參考一下

基于前幾篇的運(yùn)動框架基礎(chǔ),本文主要講解一下鏈?zhǔn)竭\(yùn)動,就是運(yùn)動完后接著再運(yùn)動,比如很多網(wǎng)站中,一個方框的出現(xiàn)和退出:出現(xiàn)時先變寬再變高,退出時先變矮再變窄退出!
之前的模型是:

startMove(obj, json);

現(xiàn)在改為:

startMove(obj, json, fn);

也就是在第一次運(yùn)動結(jié)束的時候執(zhí)行fn(); fn是傳過來的一個參數(shù),這個參數(shù)是個函數(shù),定時器清理之后手動運(yùn)行fn();如果想采用鏈?zhǔn)竭\(yùn)動,那就是在fn中再調(diào)用startMove(obj, json, fn),再在里面的fn中調(diào)用startMove(obj, json, fn),可以一直玩下去

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>運(yùn)動框架(五):鏈?zhǔn)竭\(yùn)動到完美運(yùn)動</title>
  <style type="text/css">
    div {
      width: 100px;
      height: 100px;
      background: orange;
      margin: 10px;
      float: left;
    }
  </style>
</head>
<body>
  <div id="div1"></div>

  <script type="text/javascript">
    var oDiv = document.getElementById('div1');
    oDiv.onmouseover = function() {
      startMove(oDiv, {width:300,opacity:30}, function() {
        startMove(oDiv, {height:500});
      });
    };
    oDiv.onmouseout = function() {
      startMove(oDiv, {height:100}, function() {
        startMove(oDiv, {width:100,opacity:100});
      })
    };

    function getStyle(obj, attr) {
      if (obj.currentStyle) {
        return obj.currentStyle[attr];
      } else {
        return getComputedStyle(obj, null)[attr];
      }
    }

    function startMove(obj, json, fn) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function() {
        var bStop = true;
        for (var attr in json) {
          var cur = 0;
          if (attr === 'opacity') {
            cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
          } else {
            cur = parseInt(getStyle(obj, attr));
          }
          if (cur != json[attr]) {
            bStop = false;
          }
          var speed = (json[attr] - cur)/10;
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
          cur += speed;
          if (attr === 'opacity') {
            obj.style.filter = 'alpha(opacity:' + cur + ')';
            obj.style.opacity = cur/100;
          } else {
            obj.style[attr] = cur + 'px';
          }

        }
        if (bStop) {
          clearInterval(obj.timer);
          if (fn) fn();
        }

      }, 30);
    }
  </script>
</body>
</html>

最后提取出來的完美運(yùn)動框架如下,motionFrame.js:

function getStyle(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj, null)[attr];
  }
}

function startMove(obj, json, fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var bStop = true;
    for (var attr in json) {
      var cur = 0;
      if (attr === 'opacity') {
        cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
      } else {
        cur = parseInt(getStyle(obj, attr));
      }
      if (cur != json[attr]) {
        bStop = false;
      }
      var speed = (json[attr] - cur)/10;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      cur += speed;
      if (attr === 'opacity') {
        obj.style.filter = 'alpha(opacity:' + cur + ')';
        obj.style.opacity = cur/100;
      } else {
        obj.style[attr] = cur + 'px';
      }

    }
    if (bStop) {
      clearInterval(obj.timer);
      if (fn) fn();
    }

  }, 30);
}

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 如何處理JSON中的特殊字符

    如何處理JSON中的特殊字符

    這篇文章主要介紹了如何處理JSON中的特殊字符,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11
  • 用cssText批量修改樣式

    用cssText批量修改樣式

    一般情況下我們用js設(shè)置元素對象的樣式會使用這樣的形式
    2009-08-08
  • JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請求

    JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請求

    當(dāng)我們在開發(fā)時遇到需要同時發(fā)起百條接口請求怎么辦呢,本文主要來和大家介紹一下JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請求,需要的可以參考下
    2024-03-03
  • javascript中判斷json的方法總結(jié)

    javascript中判斷json的方法總結(jié)

    JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式,采用完全獨(dú)立于語言的文本格式,是理想的數(shù)據(jù)交換格式。同時,JSON是 JavaScript 原生格式,這意味著在 JavaScript 中處理 JSON數(shù)據(jù)不須要任何特殊的API或工具包,接下來跟著小編學(xué)習(xí)js中判斷json的方法吧
    2015-08-08
  • JavaScript判斷是否為數(shù)字的4種方法及效率比較

    JavaScript判斷是否為數(shù)字的4種方法及效率比較

    這篇文章主要介紹了JavaScript判斷是否為數(shù)字的4種方法及效率比較,本文直接給出判斷方法實(shí)現(xiàn)代碼及運(yùn)行效率效果圖,方便大家選擇使用,需要的朋友可以參考下
    2015-04-04
  • Jquery調(diào)用iframe父頁面中的元素及方法

    Jquery調(diào)用iframe父頁面中的元素及方法

    對于javascript操作iframe父級頁面元素的方法,大家應(yīng)該都非常清楚了,下面結(jié)合當(dāng)前非常流行的jquery分享一下如何使用jquery查找和操作iframe父級頁面元素的實(shí)現(xiàn)代碼。
    2016-08-08
  • JS預(yù)覽圖像將本地圖片顯示到瀏覽器上

    JS預(yù)覽圖像將本地圖片顯示到瀏覽器上

    本代碼從file域獲取本地圖片url并將本地圖片顯示到瀏覽器上,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下,希望對大家有所幫助
    2013-08-08
  • js實(shí)現(xiàn)跨域的4種實(shí)用方法原理分析

    js實(shí)現(xiàn)跨域的4種實(shí)用方法原理分析

    這篇文章主要分析了js實(shí)現(xiàn)跨域的4種實(shí)用方法原理,主要是使用jsonp跨域,使用window.name來進(jìn)行跨域,對這方面感興趣的朋友可以參考一下
    2015-10-10
  • JavaScript?中使用SpreadJS導(dǎo)入和導(dǎo)出?Excel?文件的方法

    JavaScript?中使用SpreadJS導(dǎo)入和導(dǎo)出?Excel?文件的方法

    這篇文章主要介紹了如何在?JavaScript?中使用SpreadJS導(dǎo)入和導(dǎo)出?Excel?文件,本文通過圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-09-09
  • JS+CSS實(shí)現(xiàn)炫酷光感效果

    JS+CSS實(shí)現(xiàn)炫酷光感效果

    這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)炫酷光感效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09

最新評論