原生js造輪子之模仿JQ的slideDown()與slideUp()

RancherLabs 發(fā)布于2019-08-26 13:22 / 1692人閱讀

摘要：代碼如下原生調(diào)用該文件中加入這一行代碼參數(shù)參數(shù)時(shí)間調(diào)用該文件加入這一行代碼中引入綁定到實(shí)例原型上組件中調(diào)用鄙人創(chuàng)建了一個(gè)群，供大家學(xué)習(xí)交流，希望和大家合作愉快，互相幫助，交流學(xué)習(xí)，以下為群二維碼

代碼如下:

const slider = (function() {
  var Slider = {};
  // the constructed function,timeManager,as such that"s a manager about managing the setInterval
  function TimerManager() {
    this.timers = [];
    this.args = [];
    this.isTimerRun = false;
  }
  // if the element can"t has the property of TimerManage what represented the constructor function,repeated creating a constructed function
  TimerManager.makeTimerManage = function(element) {
    if (
      !element.TimerManage ||
      element.TimerManage.constructor !== TimerManager
    ) {
      element.TimerManage = new TimerManager();
    }
  };
  // That"s order to create the method what add the timer
  TimerManager.prototype.add = function(timer, args) {
    this.timers.push(timer);
    this.args.push(args);
    this.timerRun();
  };
  // called the method is order to run the timer by ordering
  TimerManager.prototype.timerRun = function() {
    if (!this.isTimerRun) {
      var timer = this.timers.shift(),
        args = this.args.shift();
      if (timer && args) {
        this.isTimerRun = true;
        timer(args[0], args[1]);
      }
    }
  };
  // let it run the next timer
  TimerManager.prototype.next = function() {
    this.isTimerRun = false;
    this.timerRun();
  };
  function slideUp(element, time) {
    if (element.offsetHeight > 0) {
      var totalHeight = element.offsetHeight;
      var currentHeight = totalHeight;
      var reduceValue = totalHeight / (time / 10);
      element.style.transition = "height " + time + " ms";
      element.style.overflow = "hidden";
      var timer = setInterval(function() {
        currentHeight -= reduceValue;
        element.style.height = currentHeight + "px";
        if (currentHeight <= 0) {
          clearInterval(timer);
          element.style.display = "none";
          element.style.height = totalHeight + "px";
          if (
            element.TimerManage &&
            element.TimerManage.constructor === TimerManager
          ) {
            element.TimerManage.next();
          }
        }
      }, 10);
    } else {
      if (
        element.TimerManage &&
        element.TimerManage.constructor === TimerManager
      ) {
        element.TimerManage.next();
      }
    }
  }
  function slideDown(element, time) {
    if (element.offsetHeight <= 0) {
      element.style.display = "block";
      element.style.transition = "height" + time + " ms";
      element.style.overflow = "hidden";
      var totalHeight = element.offsetHeight;
      var currentHeight = 0;
      element.style.height = "0px";
      var addValue = totalHeight / (time / 10);
      var timer = setInterval(function() {
        currentHeight += addValue;
        element.style.height = currentHeight + "px";
        if (currentHeight >= totalHeight) {
          clearInterval(timer);
          element.style.height = totalHeight + "px";
          if (
            element.TimerManage &&
            element.TimerManage.constructor === TimerManager
          ) {
            element.TimerManage.next();
          }
        }
      }, 10);
    } else {
      if (
        element.TimerManage &&
        element.TimerManage.constructor === TimerManager
      ) {
        element.TimerManage.next();
      }
    }
  }
  // the interface about slideUp method
  Slider.slideUp = function(element) {
    TimerManager.makeTimerManage(element);
    element.TimerManage.add(slideUp, arguments);
    return this;
  };
  // the interface about slideDown method
  Slider.slideDown = function(element) {
    TimerManager.makeTimerManage(element);
    element.TimerManage.add(slideDown, arguments);
    return this;
  };
  return Slider;
})();

原生調(diào)用:

//該js文件中加入這一行代碼
window.slider = slider;
//參數(shù)1,dom,參數(shù)2:時(shí)間
slider.slideDown(document.queryselector(),time);
slider.slideUp(document.queryselector(),time);

vue.js調(diào)用:

//該js文件加入這一行代碼
export default slider;

main.js中引入:
import slider from "slider.js";
//綁定到Vue實(shí)例原型上
Vue.prototype.slider = slider;

//組件中調(diào)用
this.slider(this.$refs,time);

鄙人創(chuàng)建了一個(gè)QQ群，供大家學(xué)習(xí)交流，希望和大家合作愉快，互相幫助，交流學(xué)習(xí)，以下為群二維碼：

GPU云服務(wù)器云服務(wù)器造輪子原生js的hover js jq() jq js 生成標(biāo)簽

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108686.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

RancherLabs

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

基于STM32的匯編程序

閱讀 1963·2021-09-30 09:46
CSS3動(dòng)畫之逐幀動(dòng)畫

閱讀 1373·2019-08-30 15:43
css3

閱讀 1131·2019-08-29 13:28
Web 標(biāo)準(zhǔn)制定流程

閱讀 1932·2019-08-29 11:24
原生js造輪子之模仿JQ的slideDown()與slideUp()

閱讀 1693·2019-08-26 13:22
仿鏈家地圖找房的簡(jiǎn)單實(shí)現(xiàn)

閱讀 3974·2019-08-26 12:01
AJAX的出現(xiàn)與跨域處理

閱讀 1829·2019-08-26 11:33
JS每日一題: 小程序頁(yè)面之間如何通信?

閱讀 3250·2019-08-23 15:34

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

原生js造輪子之模仿JQ的slideDown()與slideUp()

相關(guān)文章