JavaScript 幻灯片元素

Question

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

http://demos.flesler.com/jquery/localScroll/#section1c

但是使用Pure Javascript，所以NOT 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将向上滑动并设置其>显示为无，如果我再次点击它，则将其显示设置为阻止并向下滑动;

Answer 1

滑动动画本身，就像 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);
    }
}

这本质上是 JavaScript 动画的基础知识。这个想法很简单。您可以使用任何 CSS 样式属性进行动画：顶部和左侧用于绝对或相对定位的元素，边距（如我的示例）、宽度、高度、透明度等。

现在，至于在您的具体情况下使用什么取决于您的意图。例如，执行您所描述的最简单的操作是更改 div 高度直到其变为零。类似于：

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);
    }
}

但这不是示例 jQuery 插件的做法。看起来它通过移动元素的顶部和左侧样式属性来移动元素，并通过使用带有 overflow:hidden 的容器 div 将内容隐藏在屏幕之外。

Answer 2

我的解决方案使用 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>