2

次または前のボタンをクリックすると、さまざまなWebページがスライドします。同じ効果が欲しいのですが、方法が見つかりませんでした。HTML、CSS、JQueryまたはJavascriptコードで答えを投稿できますか。

4

2 に答える 2

2

ここでは、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();
        }
    });
});
于 2012-09-16T14:52:47.737 に答える
1

超ワイドなウェブサイトを作成し、Javascriptを使用して次のセクションにスクロールするだけです。

フレームワークを使用することはあなたのための解決策かもしれません。このリンクを確認してください

于 2012-09-16T14:42:05.600 に答える