一、Math常用函數

• **Math.ceil() 向上取整 天花板 **

  Math.ceil(1.11) 結果 是 2

  Math.ceil(1.99) 結果 是 2

  Math.ceil(-1.5) 結果 是 -1

• **Math.floor() 向下取整 地板 **

  Math.floor(1.11) 結果 是 1

  Math.floor(1.99) 結果 是 1

  Math.floor(-1.2) 結果 是 -2

• Math.round() 四舍五入

  Math.round(1.11) 結果 是 1

  Math.round(1.99) 結果 是 2

  Math.round(-1.2) 結果 是 -2

二、緩動動畫原理

• 緩動動畫的原理:** 盒子本身的位置 + 步長 (不斷變化的，由大變小)**

• 步長：**begin = begin + (end - begin) / 緩動系數 **

• 基本的緩動動畫函數：

  // 緩動動畫
  // 誰  目標
  function buffer(obj, target) {
      // 1. 清除定時器
      clearInterval(obj.timer);
      // 2. 設置定時器
      obj.timer = setInterval(function () {
             // 2.1 求出步長
             var speed = (target - obj.offsetLeft) / 20;
             console.log(speed);
             speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
             console.log(speed);
             // 2.2 設置動畫
             obj.style.left = obj.offsetLeft + speed + 'px';
             obj.innerHTML = obj.offsetLeft;
             // 2.3 清除定時器
             if(obj.offsetLeft == target){
                    clearInterval(obj.timer);
              }
              }, 20);
  }
  

2.1 常見的 js訪問 CSS 屬性

• 在開發中，訪問得到css 屬性，比較常用的有兩種：

• • 點語法

    box.style.width，box.style.height，box.style.top，box.style.left
    得到帶有單位的屬性值，比如：200px；
    但是，點語法存在一個很致命的問題，跟在style后面的屬性不能由外面傳入

    var h = 'height';
    box.style.h = 300 + 'px';
    

• • 下標語法

  ** 利用 [] 訪問屬性 元素.style[“屬性”]; **
  這種語法的好處就是可以動態的傳遞參數作為屬性

       var h = 'height';
       box.style[h] = 300 + 'px';
  

2.2 JS獲取CSS的樣式

在開發中，我們想要獲得css 的樣式，通常采用：box.style.top ，box.style.backgorundColor等， 但這種方式只能得到 行內樣式，而平常用的最多的是頁內樣式或者外部樣式， 如何解決。

• • 在IE和Opera瀏覽器

    **obj.currentStyle **

  • 其他W3C標準瀏覽器

    **window.getComputedStyle("元素", "偽類") ** （ 注意：兩個選項是必須的， 沒有偽類 用 **null **替代 ）

• • 兼容寫法

    function getStyleAttr(obj, attr) {
        if(obj.currentStyle){ // IE 和 opera
             return obj.currentStyle[attr];
        }else {
             return window.getComputedStyle(obj, null)[attr];
        }
    }
    

2.3 js對象遍歷

• for in 關鍵字

  for ( 變量 in 對象) { 執行語句; }

  for(var k in json){
     console.log(k); // key
     console.log(json[k]); // value
  }
  

2.4 回調函數

在開發中，有很多操作是鏈式的，下一個操作接著上一個操作執行，如何實現** 回調函數。**

   回調函數什么時候調用?
  --> 動畫結束的時候調用 
  --> 動畫什么時候結束?
  ---> 定時器被清除的時候
  --> 定時器被清除時調用回調函數

2.5 完整版緩動動畫

  /*
   * 緩動動畫
   * obj: 要做動畫的元素
   * json: 要做動畫的屬性鍵值對
   * fn: 回調函數
  */
  function Buffer(obj, json, fn) {
      // 1. 清除定時器
      clearInterval(obj.timer);
      // 2. 設置定時器
      obj.timer = setInterval(function () {
          var flag = true, begin, target;
          // 2.1 遍歷json
          for(var k in json){
             // 2.1.1 獲取做動畫屬性的初始值
             if('opacity' == k){ // 透明度
                begin = parseInt(parseFloat(getCssStyleAttr(obj, k)) *100) || 0;
                target = parseInt(parseFloat(json[k])*100);
             }else { // 其他動畫
                begin = parseInt(getCssStyleAttr(obj, k));
                target = parseInt(json[k]);
             }
             // 2.1.2 獲取動畫的步長
             var speed = (target - begin) / 20;
             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
             // 2.1.3 設置緩動動畫
             if('opacity' == k ){ // 透明度
                   obj.style.opacity = (begin + speed) / 100;
                   obj.style.filter = 'alpha(opacity='+ (begin + speed) +')';
             }else if('zIndex' == k){
                   obj.style.zIndex = json[k];
            }else { // 其他情況
                  obj.style[k] = begin + speed + 'px';
            }
            // 2.1.4 判斷是否清除定時器
            flag = (begin != target) ? false : true;
           }
           // 2.2 清除定時器
           if(flag){
               clearInterval(obj.timer);
               //判斷
               if(fn){
                   fn(); // 執行函數
               }
           }
       }, 20);
  }

  function $(id) {
      return document.getElementById(id);
  }

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

4256-106.jpg

61048-106.jpg