网站上的页面转换？答案

【问题标题】：Page transitions on websites?网站上的页面转换？
【发布时间】：2009-04-23 13:23:29
【问题描述】：

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

【问题讨论】：

人们真的喜欢页面过渡中的俗气效果吗？
不，我不这么认为。
我当然不会。这是一个客户的要求。我希望采取简单的方法并通过说不可能来劝阻他。如果不是，我可以展示我确实找到的 javascript 效果是多么的俗气和特定于浏览器。
好吧，我想我并没有真正帮助你的“不可能”案件，但似乎我可能在俗气的部分提供了帮助......祝你好运，否则说服他 - 有些人就是这么固执。 :-/
这绝对是可行的，但你也许可以在它的负面可用性方面说服他们放弃它——人们讨厌等待，而且整页转换完全是轻浮的，肯定会惹恼用户。询问他们是否见过有这种行为的大型成功网站 - 不会找到。

标签： javascript jquery html

【解决方案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;
}

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

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

【讨论】：

这完全是 rad... /sarcasm

【解决方案2】：

IE 有一个非常简单的page transition effects 实现，但我认为它们不适用于其他浏览器，如 Mozilla 和 Safari。

【讨论】：