JavaScript變速動(dòng)畫函數(shù)封裝添加任意多個(gè)屬性

發(fā)布時(shí)間：2021-08-05 11:38:13 來(lái)源：億速云閱讀：192 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下JavaScript變速動(dòng)畫函數(shù)封裝添加任意多個(gè)屬性，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

具體代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 200px;
      height: 100px;
      background-color: pink;
      position: absolute;
    }
  </style>
</head>
<body>
<input type="button" id="bt" value="顯示效果"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //點(diǎn)擊按鈕，使元素的寬度到達(dá)一個(gè)值，高度到達(dá)一個(gè)值
  //獲取任意元素的任意屬性值
  function getStyle(element, attr) {
    //判斷瀏覽器是否支持這個(gè)方法
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
  }
  //使任意元素，改變多個(gè)值的大小
  function animate(element, json) {
    //清理定時(shí)器
    clearInterval(element.timeId);
    //創(chuàng)建定時(shí)器
    element.timeId = setInterval(function () {
      //默認(rèn)全部到達(dá)目標(biāo)
      var flag = true;
      //循環(huán)遍歷要改變的屬性和值
      for (var attr in json) {
        //過(guò)去該屬性的當(dāng)前的值
        var current = parseInt(getStyle(element, attr));
        //當(dāng)前屬性對(duì)應(yīng)的目標(biāo)值
        var target = json[attr];
        //移動(dòng)的步數(shù)
        var step = (target - current) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        current += step;//移動(dòng)后的值
        element.style[attr] = current + "px";
        if (current != target) {
          flag = false;
        }
      }
      if (flag) {
        //清理定時(shí)器
        clearInterval(element.timeId);
      }
      //測(cè)試代碼
      console.log("目標(biāo):" + target + ",當(dāng)前:" + current + ",每次的移動(dòng)步數(shù):" + step);
    }, 20)
  }
  my$("bt").onclick = function () {
    animate(my$("dv"), {"width": 300, "left": 100, "top": 50});
  };
</script>
</body>
</html>

common.js:

/**
 * Created by Administrator on 2018/8/18.
 */
/**
 * Created by Administrator on 2016/7/27.
 */
/**
 * Created by Administrator on 2016/7/21.
 *
 * 次文件來(lái)自 很牛x的程序員 .
 *
 * 作者:無(wú)名
 */
/*
 * 該函數(shù)是返回的是指定格式的日期,是字符串類型
 * 參數(shù):date ----日期
 * 返回值: 字符串類型的日期
 * */
function getDatetoString(date) {
  var strDate;//存儲(chǔ)日期的字符串
  //獲取年
  var year = date.getFullYear();
  //獲取月
  var month = date.getMonth() + 1;
  //獲取日
  var day = date.getDate();
  //獲取小時(shí)
  var hour = date.getHours();
  //獲取分鐘
  var minute = date.getMinutes();
  //獲取秒
  var second = date.getSeconds();
  hour = hour < 10 ? "0" + hour : hour;
  minute = minute < 10 ? "0" + minute : minute;
  second = second < 10 ? "0" + second : second;
  //拼接
  strDate = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;//隱藏問(wèn)題,關(guān)于變量聲明的位置
  return strDate;
}
//根據(jù)id獲取元素對(duì)象
function my$(id) {
  return document.getElementById(id);
}
/*
 *
 * innerText屬性IE中支持
 * textContent火狐中支持
 * dvObj.innerText="您好";設(shè)置innerText的值
 * console.log(dvObj.innerText);獲取innerText的值
 * 因?yàn)樯鲜鲈?inerText有時(shí)候需要設(shè)置值，有時(shí)候需要獲取值
 * 所以,需要寫一個(gè)兼容的代碼能在火狐中使用,也可以在IE中使用
 *
 *
 * */
/*
 *設(shè)置innerText屬性的值
 * element-----為某個(gè)元素設(shè)置屬性值
 * content-----設(shè)置的值
 * */
function setInnerText(element, content) {
  if (typeof element.textContent === "undefined") {
    //IE瀏覽器
    element.innerText = content;
  } else {
    element.textContent = content;
  }
}
/*
 * 獲取innerText屬性的值
 * element 要獲取的元素
 * 返回的是該元素的innerText值
 * */
function getInnerText(element) {
  if (typeof element.textContent === "undefined") {
    //IE瀏覽器
    return element.innerText;
  } else {
    return element.textContent;
  }
}
//獲取當(dāng)前元素前一個(gè)元素
function getPreviousElement(element) {
  if (element.previousElementSibling) {
    return element.previousElementSibling;
  } else {
    var ele = element.previousSibling;
    while (ele && ele.nodeType !== 1) {
      ele = ele.previousSibling;
    }
    return ele;
  }
}
//獲取當(dāng)前元素的后一個(gè)元素
function getNextElement(element) {
  if (element.nextElementSibling) {
    return element.nextElementSibling;
  } else {
    var ele = element.nextSibling;
    while (ele && ele.nodeType !== 1) {
      ele = ele.nextSibling;
    }
    return ele;
  }
}
//獲取父元素中的第一個(gè)元素
function getFirstElementByParent(parent) {
  if (parent.firstElementChild) {
    return parent.firstElementChild;
  } else {
    var ele = parent.firstChild;
    while (ele && ele.nodeType !== 1) {
      ele = ele.nextSibling;
    }
    return ele;
  }
}
//獲取父元素中的最后一個(gè)元素
function getLastElementByParent(parent) {
  if (parent.lastElementChild) {
    return parent.lastElementChild;
  } else {
    var ele = parent.lastChild;
    while (ele && ele.nodeType !== 1) {
      ele = ele.previousSibling;
    }
    return ele;
  }
}
//獲取兄弟元素
function getsiblings(ele) {
  if (!ele)return;//判斷當(dāng)前的ele這個(gè)元素是否存在
  var elements = [];//定義數(shù)組的目的就是存儲(chǔ)當(dāng)前這個(gè)元素的所有的兄弟元素
  var el = ele.previousSibling;//當(dāng)前元素的前一個(gè)節(jié)點(diǎn)
  while (el) {
    if (el.nodeType === 1) {//元素
      elements.push(el);//加到數(shù)組中
    }
    el = el.previousSibling;
  }
  el = ele.nextSibling;
  while (el) {
    if (el.nodeType === 1) {
      elements.push(el);
    }
    el = el.nextSibling;
  }
  return elements;
}
//  //能力檢測(cè)多個(gè)瀏覽器為同一個(gè)對(duì)象注冊(cè)多個(gè)事件
var EventTools = {
  //為對(duì)象添加注冊(cè)事件
  addEventListener: function (element, eventName, listener) {
    if (element.addEventListener) {
      element.addEventListener(eventName, listener, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + eventName, listener)
    } else {
      element["on" + eventName] = listener;
    }
  },
  //為對(duì)象移除事件
  removeEventListener: function (element, eventName, listener) {
    if (element.removeEventListener) {
      element.removeEventListener(eventName, listener, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + eventName, listener);
    } else {
      element["on" + eventName] = null;
    }
  },
  //獲取參數(shù)e
  getEvent: function (e) {
    return e || window.event;
  },
  getPageX: function (e) {
    if (e.pageX) {
      return e.pageX;
    } else {
      //有的瀏覽器把高度設(shè)計(jì)在了文檔的第一個(gè)元素中了
      //有的瀏覽器把高度設(shè)計(jì)在了body中了
      //document.documentElement.scrollTop;//文檔的第一個(gè)元素
      //document.body.scrollTop;
      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
      return e.clientX + scrollLeft;
    }
  },
  getPageY: function (e) {
    if (e.pageY) {
      return e.pageY;
    } else {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      return e.clientY + scrollTop;
    }
  }
};

補(bǔ)充：js 變速動(dòng)畫函數(shù)

//獲取任意一個(gè)元素的任意一個(gè)屬性的當(dāng)前的值---當(dāng)前屬性的位置值
  function getStyle(element, attr) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
  }

//變速動(dòng)畫函數(shù)封裝增加任意多個(gè)屬性和回調(diào)函數(shù)及層級(jí)還有透明度
  //element元素 json對(duì)象 存儲(chǔ)屬性與值 fn為回調(diào)函數(shù)
  function animate(element, json, fn) {
    //清理定時(shí)器
    clearInterval(element.timeid);
    //設(shè)置定時(shí)器
    element.timeid = setInterval(function () {
      //假設(shè)全部到達(dá)目標(biāo)
      var f = true;
      //循環(huán)去獲取傳入的數(shù)據(jù)
      for (var i in json) {
        //判斷傳入的值 是不是opacity
        if (i == 'opacity') {
          //獲取當(dāng)前opacity的值 并且放大100倍
          var current = getStyle(element, i) * 100;
          //把目標(biāo)值也放大100倍
          var target = json[i] * 100;
          //移動(dòng)的步數(shù)
          var step = (target - current) / 10;
          //判斷是不是為0
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          //移動(dòng)后的位置
          current += step;
          //移動(dòng)元素屬性
          element.style[i] = current / 100;
          //判斷屬性是不是zIndex
        } else if (i == 'zIndex') {
          //直接設(shè)置zIndex
          element.style[i] = json[i];
        } else {
          //普通屬性獲?。ㄞD(zhuǎn)化成數(shù)字）
          var current = parseInt(getStyle(element, i));
          //目標(biāo)屬性值
          var target = json[i]
          //移動(dòng)的步驟（漸變）
          var step = (target - current) / 10;
          //判斷移動(dòng)的值取整
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          //移動(dòng)后的位置
          current += step;
          //移動(dòng)元素
          element.style[i] = current + 'px';
        }
        //只要有一個(gè)沒(méi)達(dá)到目標(biāo)就設(shè)置F為false
        if (current != target) {
          f = false;
        }
        //目標(biāo)到達(dá) 清理定時(shí)器 判斷有沒(méi)有回調(diào)函數(shù)
        if (f) {
          clearInterval(element.timeid);
          if (fn) {
            fn();
          }
        }
      }
      console.log("目標(biāo):" + target + ",當(dāng)前:" + current + ",每次的移動(dòng)步數(shù):" + step);
    }, 20)
  }

以上是“JavaScript變速動(dòng)畫函數(shù)封裝添加任意多個(gè)屬性”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

JavaScript變速動(dòng)畫函數(shù)封裝添加任意多個(gè)屬性

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽