Javascript 网站上的页面转换？

我只是想知道，在页面之间导航时，是否有任何方法可以创建漂亮、平滑的过渡效果？像盲效果、滑动效果等。我想我在寻找jQuery可以对图像做什么——但实际的网页。我知道有褪色效果等等，但我只是想知道是否有更“现代”的东西。虽然我意识到Flash非常适合这个功能，但它不是一个选项。

如果使用jQuery UI，您可以实现一些非常酷的效果。如果您使用AJAX加载所有内容，它们将变得更加平滑。。。但是，这里有一个例子可以让它在满页加载的情况下工作

首先，您需要另外包括jQuery UI（我刚刚并且只抓取了我需要的效果）：

下面是使其工作所需的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;
}

$（函数（）{
$（'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！=未定义？&“+newPageParams:”）；
window.location=newPage；
});
返回false；
});
if（getURLParam（'transition'）！=''）{
$（'body'）.show（'blind'，{}，500，null）；
}
});
函数getURLParam（strParamName）{
var strReturn=“”；
var strHref=window.location.href；
if（标准参考索引（“？”>-1）{
var strQueryString=strHref.substr（strHref.indexOf（“？”）.toLowerCase（）；
var aQueryString=strQueryString.split（“&”）；
对于（var-ipram=0；ipram-1）{
var aParam=aQueryString[ipram]。拆分（“=”）；
strReturn=aParam[1]；
打破
}
}
}
返回strReturn；
}

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

---

请注意：我只是在几分钟内完成了这项工作，所以这里可能真的是犹太人区。但是，它确实有效。。。所以是的…

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

人们真的喜欢页面转换中的低俗效果吗？不，我不相信。我当然不喜欢。这是客户的要求。我希望能走捷径，劝阻他说这是不可能的；如果不是的话，我可以展示我发现的javascript效果是多么的俗气和特定于浏览器。好吧，我想我并没有真的对你的“不可能”案例帮助这么多，但似乎我可能在俗气的部分帮了忙。。。祝你好运，否则会说服他——有些人就是这么固执-/这绝对是可行的，但你可能会说服他们放弃it的负面可用性方面——人们讨厌等待，而整个页面的转换完全是轻浮的，肯定会惹恼用户。问问他们，他们是否见过一个成功的网站有这样的行为-不会找到一个。这是如此完全rad/讽刺

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