没有jQuery的JavaScript滑动 [英] JavaScript slidedown without jQuery

问题描述

我希望对jQuery slidedown有类似的效果，但没有使用jQuery或任何其他库。我知道它是可能的，因为jQuery中的任何内容都可以在纯JavaScript中完成。更难。

I wish to have a similar effect to jQuery slidedown but without using jQuery or any other libary. I know it's "possible" as anything in jQuery can be done in plain JavaScript. Just harder.

我不能使用jQuery，因为一切都必须用我自己的代码编写而不使用任何库。

I cannot use jQuery as everything has to be written in my own code without any libaries used.

有没有人使用普通的JavaScript做过这样的事情或任何效果？

Has anyone done something like this or any effects just using plain JavaScript?

推荐答案

这是一段不错的小代码我从头开始写。

这纯粹是基于时间的。

Here is a nice little piece of code I wrote from scratch.
It is purely time based.

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

Test it here: http://jsbin.com/azewi5/5

这篇关于没有jQuery的JavaScript滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！