-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 个部分，每个部分的宽度为 4000 像素。因此body应该是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 回答