使用jQuery在页面之间滑动 [英] slide between pages using jQuery

问题描述

我有一个4页的网站，并且我希望在4页之间切换并具有幻灯片效果.我不想使用#ID进行此操作.我想按一个按钮或链接以滑至下一页.我知道可以使用jQuery完成此操作，而且我已经看过执行此操作的网站.请帮忙.预先感谢您的所有建议，批评和意见.

I have a 4 page website and I want to transition between the 4 pages with a slide effect. I don't want to do this using an #ID. I want to press a button or the link to slide to the next page. I know this can be done using jQuery and I've seen websites that do this. Please help out. Thanks in advance for all suggestions, criticisms, and comments.

推荐答案

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

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

Basically, you have to set your CSS and HTML to have all the panels/screens you want as divs - rows and columns.

然后为每个面板设置一个选择器并绑定一个点击事件[来自

Then set a selector for each panel and bind a click event [Code from 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();
    });

});

这篇关于使用jQuery在页面之间滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！