用JavaScript实现jQuery里的slideDown()。
很想知道jQuery里的slideDown用原生javascript怎么写。。有没有谁能告诉我使个怎么样的原理，具体怎么实现啊。是不是要用到setTimeout或setI...
很想知道jQuery里的slideDown用原生javascript怎么写。。有没有谁能告诉我使个怎么样的原理，具体怎么实现啊。是不是要用到setTimeout或setInterval。
展开
3个回答
展开全部
亲，你好，已经搞定，如果没问题，请采纳。
<script>
var minheight = 20;
var maxheight = 300;
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';
controler.onclick = function() {
clearInterval(timer);
var instanceheight = parseInt(slider.style.height);
var init = (new Date()).getTime();
var height = (toggled = !toggled) ? maxheight: minheight;
var disp = height - parseInt(slider.style.height);
timer = setInterval(function() {
var instance = (new Date()).getTime() - init;
if(instance < time ) {
var pos = Math.floor(disp * instance / time);
result = instanceheight + pos;
slider.style.height = result + 'px';
document.getElementById('log').innerHTML = 'Current Height : <b>' + result + '</b><br /> Current Time : <b>' + instance + '</b>';
}else {
slider.style.height = height + 'px'; //safety side ^^
clearInterval(timer);
controler.value = toggled ? ' Slide Up ' :' Slide Down ';
document.getElementById('log').innerHTML = 'Current Height : <b>' + height + '</b><br /> Current Time : <b>' + time + '</b>';
}
},1);
};
};
</script>
<body>
<h1> test </h1>
<input type="button" id="slide" value =" Slide Down "/>
<span id="log" style="position:absolute; left:10px; top:150px;"></span>
<br />
<div id="slider">
content goes here
</div>
</body>
追问
下拉速度能不能再快一点
追答
var time = 1000;
这个修改就可以呀
time 时间嘛。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
哎，看源代码就知道了呗，ctrl+f搜索slideDown知道吧？
然后呢你就看这个方法里面到底修改了什么属性呀，然后你再用js的方法修改那些属性不就够了么，这么简单，你到谷歌浏览器里面就可以搞定了，一条龙服务！！！
然后呢你就看这个方法里面到底修改了什么属性呀，然后你再用js的方法修改那些属性不就够了么，这么简单，你到谷歌浏览器里面就可以搞定了，一条龙服务！！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
