Question

我一直在努力实现水平滑动，如this link所提供的那样。我实际上已经使用了这个链接中的垂直搜索。我想要同样水平出现。有什么建议？ website screenshot

如图所示，我希望页面向左滑动，因为顶部的任何图块都会被点击，等等。

<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>

Answer 1

您需要将正文的宽度设置为等于每个部分的宽度乘以宽度。（宽度应相等）。例如，您有5个部分，每个部分的宽度为4000像素。因此身体应该是4000 * 5,20000px。然后向左浮动每个部分，并隐藏水平滚动条。

教程：http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-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();
    });
});

需要水平滚动，如链接中所示

1 个答案: