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。

网站上的页面转换？

2 个答案: