原生js造轮子之模仿JQ的slideDown()与slideUp()

王笑朝发布于2019-08-29 17:18 / 515人阅读

摘要：代码如下原生调用该文件中加入这一行代码参数参数时间调用该文件加入这一行代码中引入绑定到实例原型上组件中调用鄙人创建了一个群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码

代码如下:

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;
})();

原生调用:

//该js文件中加入这一行代码
window.slider = slider;
//参数1,dom,参数2:时间
slider.slideDown(document.queryselector(),time);
slider.slideUp(document.queryselector(),time);

vue.js调用:

//该js文件加入这一行代码
export default slider;

main.js中引入:
import slider from "slider.js";
//绑定到Vue实例原型上
Vue.prototype.slider = slider;

//组件中调用
this.slider(this.$refs,time);

鄙人创建了一个QQ群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码：

GPU云服务器云服务器造轮子原生js的hover js jq() jq js 生成标签

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114239.html

原生js造轮子之模仿JQ的slideDown()与slideUp()

摘要：代码如下原生调用该文件中加入这一行代码参数参数时间调用该文件加入这一行代码中引入绑定到实例原型上组件中调用鄙人创建了一个群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码代码如下: const slider = (function() { var Slider = {}; // the constructed function,timeManager,...

RancherLabs 2019-08-26 13:22 评论0 收藏0
JavaWEB开发04——JQuery

摘要：设计的宗旨是，，即倡导写更少的代码，做更多的事情。它封装常用的功能代码，提供一种简便的设计模式，优化文档操作事件处理动画设计和交互。今日任务使用JQuery完成页面定时弹出广告定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display = bloc...

chunquedong 2019-08-29 17:05 评论0 收藏0
JavaWEB开发04——JQuery

摘要：设计的宗旨是，，即倡导写更少的代码，做更多的事情。它封装常用的功能代码，提供一种简便的设计模式，优化文档操作事件处理动画设计和交互。今日任务使用JQuery完成页面定时弹出广告定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display = bloc...

nicercode 2019-08-02 11:51 评论0 收藏0
JavaWEB开发04——JQuery

摘要：设计的宗旨是，，即倡导写更少的代码，做更多的事情。它封装常用的功能代码，提供一种简便的设计模式，优化文档操作事件处理动画设计和交互。今日任务使用JQuery完成页面定时弹出广告定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display = bloc...

pakolagij 2019-08-23 12:34 评论0 收藏0
jQuery 入门详解（二）

摘要：相对论极大地改变了人类对宇宙和自然的常识性观念，提出了同时的相对性四维时空弯曲时空等全新的概念。狭义相对性原理是相对论的两个基本假定，在目前实验的观测下，物体的运动与相对论是吻合很好的，所以目前普遍认为相对论是正确的理论。 7. jQuery 里的事件机制 javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。jQuery不仅提供了更加优雅的事件处理...

DevYK 2019-08-22 15:20 评论0 收藏0