网站上的页面过渡？

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

当然，淡入只适用于包含此脚本的页面...

请注意：，，我只是在几分钟内就做好了，所以它可能真的是个黑人聚居区。但是，它确实有效..。所以..。嗯..。

Answer 2

IE有一个非常简单的page transition effects实现，但我不认为它们能在其他浏览器上工作，比如Mozilla和Safari。