Question

我有一个4页的网站，我想通过幻灯片效果在4页之间进行转换。我不想使用#ID这样做。我想按一个按钮或链接滑动到下一页。我知道这可以使用jQuery完成，我已经看过这样做的网站。请帮忙。提前感谢所有建议，批评和评论。

Answer 1

查看本教程和示例 http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

基本上，您必须将CSS和HTML设置为将所需的所有面板/屏幕作为div - 行和列。

然后为每个面板设置一个选择器并绑定点击事件[来自link]的代码。

$(document).ready(function() {

    //get all link with class panel
    $('a.panel').click(function () {

                //reset and highlight the clicked link
        $('a.panel').removeClass('selected');
        $(this).addClass('selected');

        //grab the current item, to be used in resize function
        current = $(this);

                //scroll it to the destination
        $('#wrapper').scrollTo($(this).attr('href'), 800);      

                //cancel the link default behavior
        return false;
    });


    //resize all the items according to the new browser size
    $(window).resize(function () {

        //call the resizePanel function
        resizePanel();
    });

});

Answer 2

我建议使用jQuery将您的内容从屏幕上滑下来，之后使用AJAX将内容刷新到新页面。将内容设置到屏幕的另一侧，然后再次使用jQuery将其从那一侧滑入。

像这样......

<div id='wrapper'> // this has a set width and overflow hidden
  <div id='content'>
    your content
  </div>
</div>

用户点击链接，为“内容”的边距设置动画，使其脱离页面。做你的AJAX，将'内容'定位到页面的另一侧（足够远，以至于你看不到它），为边缘设置动画，使其滑入视图。

使用jQuery在页面之间滑动

2 个答案: