jquery - asp.net mvc中的jQuery水平滚动

Question

是否可以在 asp.net mvc 中实现 jQuery 水平滚动？我认为在这种情况下，它是同一个页面，其中包含不同的 div。但在我的情况下，单击按钮我想通过水平滚动加载不同的页面。

jQuery 示例：

http://tympanus.net/Tutorials/WebsiteScrolling/index.html

谢谢

Answer 1

您可以尝试在 css 中创建水平滚动动画，然后当单击按钮时，在通过 ajax 加载下一页时显示该动画，一旦页面完成下载，使用下一个 div 中的页面内容填充 dom，然后结束css动画。

Answer 2

凉爽的，

查看了您的参考页面（http://tympanus.net/Tutorials/WebsiteScrolling/index.html），它真正所做的只是将 div 滚动到放置在视口之外的视图中。有许多滚动 jquery 插件可以做到这一点，在您的情况下，您所需要的只是与参考页面上的核心概念类似的设置。我看了看，这就是基本上发生的所有事情：

<script type="text/javascript">
    $(function () {
        $('ul.nav a').bind('click', function (event) {
            var $anchor = $(this);
            /*
            if you want to use one of the easing effects:
            $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
            }, 1500,'easeInOutExpo');
            */
            $('html, body').stop().animate({
                scrollLeft: $($anchor.attr('href')).offset().left
            }, 1000);
            event.preventDefault();
        });
    });
</script>

即对于该演示中的 3 个区域，通过 jquery/js 脚本调用了 3 个非常不同的“动作”。充其量，该演示确实将您的问题简化为一种非常清晰且可演示的方法来解决您的问题-仔细查看它，答案就在那里！如果需要 ajax，那么只需扩展上述核心代码以包含它（当然还有 html 语义）。

希望这会有所帮助，因为我确信无论如何你已经完成了 90% 的工作。