网页上的网页过渡？ [英] Page transitions on websites?

问题描述

我只是想知道是否有任何方法在页面之间导航时创建漂亮，平滑的过渡效果？像盲目效果，滑动效果等。我想我正在寻找像jQuery可以对图像做什么的东西 - 但是对于实际的网页。我知道有淡化效果等等，但我只是想知道是否有更现代化的东西。虽然我意识到Flash会适合这一点，但它不是一种选择。

你可以做一些非常酷的特效如果你使用jQuery UI。如果您使用AJAX加载所有内容，它们会变得更加流畅......但是，下面是一个使用整页加载的示例。

首先，您还需要额外包含jQuery UI（我只是构建了我自己的，并且只抓取了我需要的效果）：

 < script type =text / javascriptsrc =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; 
}）; 
返回false; 
}）; 
 if（getURLParam（'transition'）！=''）{
 $（'body'）。show（'blind'，{}，500， null）; 
} 
}）; 
 
函数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]; 
休息; 
} 
} 
} 
 return strReturn; 
} 
  

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

只是一个提示：我只是在几分钟内做了这件事，所以它可能是真正的贫民窟。但是，它确实有效......所以......是的......

I was just wondering if there are any methods of creating nice, smooth transition effects when navigating between pages? Things like blind effects, sliding effects, etc. I guess I'm looking for something like what jQuery can do with images - but for actual web pages. I know there are fade effects and all that, but I was just wondering if there was something more 'modern' out there. While I realize Flash would be a good fit for this, it is not an option.

解决方案

You can do some pretty cool effects if you use jQuery UI. They will go much smoother if you load everything in using AJAX... but, here's an example to get it working with full page loads.

First you need to additionally include jQuery UI (I just built my own and only grabbed the effects I needed):

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

And here's the javascript you'll need to make it work.

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

Of course, fading in is only going to work on pages that have this script on it...

Just a note: I did just kinda make this in a few minutes so it might be really ghetto. But, it does work... so... yeah...

这篇关于网页上的网页过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！