我希望具有与jQuery slidedown类似的效果,但不使用jQuery或任何其他库。我知道它是“可能的”,因为jQuery中的任何事情都可以用普通的JavaScript完成。只是更难。
我不能使用jQuery,因为所有内容都必须使用自己的代码编写,而无需使用任何库。
有人使用纯JavaScript做过类似的事情或任何效果吗?
这是我从头开始编写的一小段代码。
它纯粹是基于时间的。
var minheight = 20;
var maxheight = 100;
var time = 1000;
var timer = null;
var toggled = false;
window.onload = function() {
var controller = document.getElementById('slide');
var slider = document.getElementById('slider');
slider.style.height = minheight + 'px'; //not so imp,just for my example
controller.onclick = function() {
clearInterval(timer);
var instanceheight = parseInt(slider.style.height); // Current height
var init = (new Date()).getTime(); //start time
var height = (toggled = !toggled) ? maxheight: minheight; //if toggled
var disp = height - parseInt(slider.style.height);
timer = setInterval(function() {
var instance = (new Date()).getTime() - init; //animating time
if(instance <= time ) { //0 -> time seconds
var pos = instanceheight + Math.floor(disp * instance / time);
slider.style.height = pos + 'px';
}else {
slider.style.height = height + 'px'; //safety side ^^
clearInterval(timer);
}
},1);
};
};
在这里测试:http : //jsbin.com/azewi5/5
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句