Question

我正在尝试建立一个横向滚动网站的网站。当我点击一个哈希（＃）链接时，它应该滚动到那个部分。

我可以做这么多，但我只是想要它，这样如果我点击一个链接，它只会滚动一个单元格。向您展示的一个很好的例子就是：http://www.serialcut.com/

点击左边的链接无关紧要，它只会传输一个单元而不是3或4个。

谢谢你的帮助，

垫

Answer 1

对我来说，看起来每次点击都会通过AJAX加载内容。所以，可能发生的是它在当前内容div之前或之后添加内容div，然后滚动到那个。

HTML

<div id="container">
    <div id="current">... content...</div>
</div>

的JavaScript

$('id').click(function() {
    // ... get content via ajax

    var cur = document.getElementById('current');
    var prev = document.createElement('div');

    prev.innerHTML = 'content';
    prev.marginLeft = '-600px'; // or whatever width is needed        

    $(prev).insertBefore($(cur)).animate({'margin-left': '0'}, 2000);
    $(cur).attr('id', '').remove;
    $(prev).attr('id', 'current');

    $(cur).remove();
});

这个特殊的处理程序只向左滚动，但修改它并不困难，这样你就可以滚动任何一种方式，这取决于链接的索引。

要掌握的主要概念是DOM操作。如果要向左滚动，请在当前元素之前插入元素，并从负边距设置动画为0.如果要向右滚动，请在当前元素后插入元素，并为当前元素设置动画<动画 0到负余量。确保在元素移出屏幕后删除元素，以节省内存，并且应该全部设置。

用jquery的水平滚动网站。单细胞跳？

1 个答案: