2

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

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

但是有了Pure JavascriptsoNOT 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为and如果我再次单击它，则将其设置为and ;id=contentslide updisplaynonedisplayblockslides down

4

2 回答 2

2

与 javascript 中的所有动画一样，滑动动画本身是使用计时器函数完成的：setTimeout或setInterval. 对于像这样的简单效果，我总是更喜欢setTimeout，因为与setInterval. 它的工作原理是使用以下方法更改 CSS 属性值setTimeout：

// 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 样式属性：top 和 left 用于绝对或相对定位的元素，边距（如我的示例）、宽度、高度、透明度等。

现在，至于在您的特定情况下使用什么取决于您的意图。例如，做你描述的最简单的事情是改变 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.

于 2010-08-31T08:16:27.207 回答
1

我的解决方案使用 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>
于 2015-10-28T16:54:38.153 回答