Javascript幻灯片元素

我想知道滑动元素的最佳技术是什么，就像这些示例中所示：

但是使用

纯Javascript

所以

不是jQuery

或任何库

示例结构

<div id="holder">
    <div id="bridge" onclick="slide('content')">Click to slide</div>
    <div id="content" style="display:block;">The content</div>
</div>

点击幻灯片
内容

---

因此，如果我点击

id=bridge

则

id=content

将

向上滑动

并将其

显示设置为
无
，如果我再次点击它，则将其
显示
设置为
块
并将
向下滑动
 与javascript中的所有动画一样，滑动动画本身也是使用计时器函数完成的：
setTimeout
或
setInterval
。对于这样的简单效果，我总是更喜欢
setTimeout
，因为与
setInterval
相比，结束动画序列更容易。其工作原理是使用
setTimeout
更改CSS属性值：

// move the content div down 200 pixels:

var content = document.getElementById('content');

function moveDown () {
    var top = parseInt(content.style.marginTop); // get the top margin
                                                 // we'll be using this to
                                                 // push the div down

    if (!top) {
        top = 0; // if the margin is undefined, default it to zero
    }

    top += 20; // add 20 pixels to the current margin

    content.style.marginTop = top + 'px'; // push div down

    if (top < 200) {
        // If it's not yet 200 pixels then call this function
        // again in another 100 milliseconds (100 ms gives us
        // roughly 10 fps which should be good enough):
        setTimeout(moveDown,100);
    }
}

//将内容div向下移动200像素：
var content=document.getElementById（'content'）；
函数向下移动（）{
var top=parseInt（content.style.marginTop）；//获取上边距
//我们会用这个来
//把潜水器推下去
如果（！顶部）{
top=0；//如果边距未定义，则默认为零
}
top+=20；//将20个像素添加到当前边距
content.style.marginTop=top+'px'；//向下按div
如果（顶部<200）{
//如果它还不是200像素，那么调用这个函数
//再过100毫秒（100毫秒
//大约10 fps（应该足够好）：
设置超时（向下移动，100）；
}
}

这基本上是javascript中动画的基础。这个想法很简单。您可以为动画使用任何CSS样式属性：绝对或相对定位元素的顶部和左侧、我的示例中的边距、宽度、高度、透明度等

现在，在你的具体案例中使用什么取决于你的意图。例如，您描述的最简单的操作是更改div height，直到它变为零。比如：

function collapseContent () {
    var height = parseInt(content.style.height);

    if (!height) {
        height = content.offsetHeight; // if height attribute is undefined then
                                       // use the actual height of the div
    }

    height -= 10; // reduce height 10 pixels at a time

    if (height < 0) height = 0;

    content.style.height = height + 'px';

    if (height > 0) {
        // keep doing this until height is zero:
        setTimeout(collapseContent,100);
    }
}

函数collapseContent（）{
var height=parseInt（content.style.height）；
如果（！高度）{
height=content.offsetHeight；//如果height属性未定义，则
//使用div的实际高度
}
高度-=10；//一次减少高度10像素
如果（高度<0）高度=0；
content.style.height=高度+px；
如果（高度>0）{
//继续执行此操作，直到高度为零：
设置超时（collapseContent，100）；
}
}

但示例jQuery插件并不是这样做的。它看起来像是通过移动元素的顶部和左侧样式属性来移动元素，并通过使用带有
溢出：隐藏
的容器div来隐藏屏幕外的内容。我的解决方案使用css转换：

<style type="text/css">
    #slider {
        box-sizing: border-box;
        transition: height 1s ease;
        overflow: hidden;
    }
</style>

<div id="slider" style="height: 0">
    line 1<br>
    line 2<br>
    line 3
</div>

<script>
    function slideDown(){
        var ele = document.getElementById('slider');
        ele.style.height = "3.3em";

        // avoid scrollbar during slide down
        setTimeout( function(){
            ele.style.overflow = "auto";
        }.bind(ele), 1000 );                        // according to height animation
    }

    function slideUp(){
        var ele = document.getElementById('slider');
        ele.style.overflow = "hidden";
        ele.style.height   = "0";
    }
</script>


#滑块{
框大小：边框框；
过渡：高度1秒；
溢出：隐藏；
}
第1行

第2行

第3行
函数slideDown（）{
var ele=document.getElementById（'slider'）；
ele.style.height=“3.3em”；
//向下滑动时避免滚动条
setTimeout（函数（）{
ele.style.overflow=“自动”；
}.bind（ele），1000）；//根据高度动画
}
函数slideUp（）{
var ele=document.getElementById（'slider'）；
ele.style.overflow=“隐藏”；
ele.style.height=“0”；
}
最简单的方法是使用CSS转换。这是当前更好的解决方案。