-1

私はこのリンクが提供するように水平スライドを実装しようとしていました。私は実際、このリンクのように垂直方向のスコアリングを使用しました。同じものを横に表示したい。助言がありますか？ウェブサイトのスクリーンショット

画像のように、上部のタイルのいずれかがクリックされるなどして、ページを左にスライドさせたいと思います。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.reveal.js"></script>
<script type="text/javascript">
    $(function() {
        var $items = $('#vtab>ul>li');
        $items.mouseover(function() {
            $items.removeClass('selected');
            $(this).addClass('selected');

            var index = $items.index($(this));
            $('#vtab>div').hide().eq(index).show();
        }).eq(0).mouseover();
    });
</script>
4

1 に答える 1

1

本体の幅は、セクション数×各セクションの幅に等しく設定する必要があります。（同じ幅である必要があります）。たとえば、5つのセクションがあり、それぞれの幅は4000pxです。したがって、本文は4000 * 5、20000pxである必要があります。次に、各セクションを左にフロートさせ、水平スクロールバーを非表示にします。

チュートリアル：http ：//tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizo​​ntal-page-scrolling-with-jquery/

デモ： http： //jsfiddle.net/LYxQ7/

$(function() {
    $('ul.nav a').bind('click',function(event){
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 1000);
        event.preventDefault();
    });
});
于 2013-02-17T17:39:25.843 に答える