我希望有一个类似的效果,jQuery slidedown,但没有使用jQuery或任何其他库。我知道这是“可能”,因为jQuery中的任何东西都可以在纯JavaScript中完成。更难。
我不能使用jQuery,因为一切都必须写在我自己的代码,没有使用任何libaries。
有没有人做这样的事情或任何效果只是使用纯JavaScript?
解决方法
这里是一个很好的小块代码,我从头写,这是纯粹的时间基础。
var minheight = 20; var maxheight = 100; var time = 1000; var timer = null; var toggled = false; window.onload = function() { var controler = document.getElementById('slide'); var slider = document.getElementById('slider'); slider.style.height = minheight + 'px'; //not so imp,just for my example controler.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); }; };
原文地址:https://www.jb51.cc/jquery/184116.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。