前端抽屉滑动效果,简版
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,
·
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
);
更多推荐
所有评论(0)