前端抽屉滑动效果,简版

export default {
toggle: function(o, height, times) {
if (!o.tid) o.tid = "_" + Math.random() * 100;
if (!window.toggler) window.toggler = {};
if (!window.toggler[o.tid]) {
window.toggler[o.tid] = {
obj: o,
maxHeight: o.offsetHeight,
minHeight: height, //高度
timer: null,
action: 1
};
}
o.style.height = o.offsetHeight + "px";
if (window.toggler[o.tid].timer) clearTimeout(window.toggler[o.tid].timer);
window.toggler[o.tid].action *= -1;
window.toggler[o.tid].timer = setTimeout(() => {
this.anim(o.tid, times);
}, times); //循环时间
},
anim: function(id, times) {
var t = window.toggler[id];
var o = window.toggler[id].obj;
if (t.action < 0) {
if (o.offsetHeight <= t.minHeight) {
clearTimeout(t.timer);
return;
}
} else {
if (o.offsetHeight >= t.maxHeight) {
clearTimeout(t.timer);
return;
}
}
o.style.height = parseInt(o.style.height, 10) + t.action * 8 + "px"; //8是每次变化的量
window.toggler[id].timer = setTimeout(() => {
this.anim(id, times);
}, times); //循环时间
}
};

调用方法

 Slideutlis.toggle(
document.getElementsByClassName("className")[0].parentNode,43,10//element,height,speed
);

最后

以上就是舒服画笔为你收集整理的前端抽屉滑动效果,简版的全部内容，希望文章能够帮你解决前端抽屉滑动效果,简版所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。