JQuery - 滑动

Question

很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它， visit the help center 。

已关闭 10 年前。

我看到了this website在此，当我们单击下一个或上一个按钮时，它会滑动不同的网页。我想要同样的效果，但我找不到方法。您可以用 HTML、CSS 和 JQuery 或 Javascript 代码发布答案吗？

Answer 1

这里，只有一种方法!

HTML

<div id="item1" class="page"><a href="#item2">1</a></div>
<div id="item2" class="page"><a href="#item3">2</a></div>
<div id="item3" class="page"><a href="#item4">3</a></div>
<div id="item4" class="page"><a href="#item1">4</a></div>

CSS

html, body {height:100%; margin:0; overflow-y:hidden}
.page {position:absolute; width:100%; height:100%}
#item1 {left:0%; background:#222}
#item2 {left:100%; background:#444}
#item3 {left:200%; background:#666}
#item4 {left:300%; background:#888}

JS

$(function() {
    $('a[href*=#]').on('click', function(e) {
        var hash = $(this.hash).position();
        if (hash) {
            $('html, body').stop().animate({
                scrollLeft: hash.left
            }, 600, 'swing');
            e.preventDefault();
        }
    });
});