javascript - 网站上的页面转换？

Question

我只是想知道是否有任何方法可以在页面之间导航时创建漂亮、平滑的过渡效果？诸如盲效果、滑动效果等之类的东西。我想我正在寻找类似 jQuery 可以对图像执行的操作——但用于实际的网页。我知道有淡入淡出效果等等，但我只是想知道是否有更“现代”的东西。虽然我意识到 Flash 很适合这个，但它不是一个选择。

Answer 1

如果您使用 jQuery UI，您可以制作一些非常酷的效果。如果您使用 AJAX 加载所有内容，它们会变得更加顺畅……但是，这里有一个让它在整个页面加载下工作的示例。

首先你需要额外包含 jQuery UI(我只是 built my own 并且只抓取了我需要的效果):

<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>

这是让它工作所需的 javascript。

$(function() {
    $('body').hide();
    $('a').bind('click', function() { 
        var newPage = $(this).attr('href');
        $('body').hide('blind',{},500, function() {
            newPageParts =  newPage.split('?');
            newPageURL = newPageParts[0];
            newPageParams = newPageParts[1];
            newPage = newPageURL+"?transition=true"+(newPageParams != undefined ? "&"+newPageParams : '');
            window.location=newPage;
        });
        return false;
    });
    if(getURLParam('transition') != '') {
        $('body').show('blind',{},500,null);
    }
});

function getURLParam(strParamName){
    var strReturn = "";
    var strHref = window.location.href;
    if ( strHref.indexOf("?") > -1 ){
        var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
        var aQueryString = strQueryString.split("&");
        for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
            if (aQueryString[iParam].indexOf(strParamName + "=") > -1 ){
                var aParam = aQueryString[iParam].split("=");
                strReturn = aParam[1];
                break;
            }
        }
    }
    return strReturn;
}

当然，淡入仅适用于具有此脚本的页面...

请注意:我只是在几分钟内完成了这个，所以它可能真的很贫民窟。但是，它确实有效……所以……是的……