代码如下:

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

原生js造轮子之模仿JQ的slideDown()与slideUp()的更多相关文章

  1. 如何用js造轮子

    写了一个非常通俗易懂的造轮子的方法 <div class="wrap"></div> <div class="wrap">& ...

  2. 使用原生 python 造轮子搭建博客

    这篇用来 记录一个 从零开始的 博客搭建,希望坚持下去,因为python 开发效率令人发指,所以会原生从零写 ORM ,Web 框架 前提是打好 异步 io 的基础, 使用异步,有一点要谨记,一旦开始 ...

  3. 造轮子,模仿WPF的UI框架,还没完善。。。

    Wtf(暂时命名,随便起的 = _=),模仿WPF的框架,还没有完善,只有简单的基础元素,支持数据绑定.虽然支持mono但是mono有bug 写这个只是兴趣爱好,感觉也没多大意义了,如果这个UI框架完 ...

  4. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  5. 原生JS实现省市区(县)三级联动选择

    原文地址→看过来 写在前面 前段时间写一个关于天气的东西,里面的省市区(县)城市选择让我很头疼,在网上搜索出来大都是借助插件或者第三方库,感觉这样做代码会很重,所以索性就把几种城市选择的方式实现一遍, ...

  6. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  7. 抛弃JQ,回归原生js……

    之前我写过一篇文章叫做<jq不会被淘汰>--而事实上它真的不会被淘汰,因为即使在mvvm框架盛行的今天,原生js的api越来越友好的今天,jq依然在用户量上是霸主-- 但是今天我们要讨论的 ...

  8. JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  9. 导航栏中各按钮在点击当前按钮变色其他按钮恢复为原有色的实现方法(vue、jq、原生js)

    一.vue如何实现? 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. pandas模块篇(之二)

    今日内容概要 布尔选择器 索引 数据对齐 数据操作(增出改查) 算术方法 DataFrame(Excel表格数据) 布尔选择器 import numpy as np import pandas as ...

  2. netty系列之:EventLoop,EventLoopGroup和netty的默认实现

    目录 简介 EventLoopGroup和EventLoop EventLoopGroup在netty中的默认实现 EventLoop在netty中的默认实现 总结 简介 在netty中不管是服务器端 ...

  3. windows下安装gym

    安装gym在执行pip install -e'.[all]'这句语句时,可能会出现这种情况 在pycharm中运行的时候会出现如下这种情况: 或者这种情况 出现这种问题可能是python的版本太高了, ...

  4. JS-购物车

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 数据备份RAID1 和RAID5详解和对比

    数据备份RAID1 和RAID5详解和对比 RAID 全称 Redundant Array of Independent Disks,中文意思"独立的冗余磁盘列队". RAID 一 ...

  6. git pull origin master 报错问题解决 fatal: couldn‘t find remote ref master

    报错:fatal: couldn't find remote ref master 解决:使用以下命令 git pull origin main 替代报错命令: git pull origin mas ...

  7. LGP3702题解

    很容易想到容斥,计算不包含质数的方案数和总方案数. 设 \(f[n][i]\) 表示长度为 \(n\) 的序列,每个元素的和对 \(p\) 取模的结果. 容易有 \(f[n][i]=\sum_{j=0 ...

  8. BSOJ5086题解

    题意略. 我们设 \([x^k]G_n(x)\) 代表深度为 \(n\) 的树,距离为 \(k\) 的点对数量,\([x^k]F_n(x)\) 为深度为 $ n $ 的树中,深度为 \(k\) 的节点 ...

  9. github:git clone下载加速以及vim-plug下载插件加速

    git clone 下载加速 1. 先在github将仓库地址复制下来 2. git clone时将https://github.com/* 改为https://gitclone.com/github ...

  10. 跨平台跨架构的统信DTK开发套件教程及常见问题

    DTK是统信基于Qt开发的一整套简单且实用的通用开发框架,处于统信UOS系统中的核心位置,统信UOS浏览器.音乐.邮件等40余款原生应用全部使用DTK开发.DTK从开发者的角度出发,融合现代化的开发理 ...