用jQuery和jQuery UI做的自定义404页面

用jQuery和jQuery UI做的404错误页面效果,裂开和振动的效果,蛮逼真的,点击下面的图片查看效果:

HTML & CSS

首先建一个简单的html页面,当然你自己运用这个404页面的时候可以加一些自己的东西,例如,网站首页链接、网站导航等,这里我们为了演示就简单些了:

[code lang="html"]
<html>
<head>
<title>404 - File Not Found - Reynoldsftw.com</title>
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script src="js/jquery-background.js"></script>
<script src="js/controller.js"></script>
<LINK href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="error_code">404</div>
<div id="error_status">File Not Found</div>
<div id="error_message">We're sorry you are seeing this page, please don't break the site again!</div>
<div id="crack"></div>
<div id="crack_overlay"></div>
</body>
</html>
[/code]

有几个DIV里面放文本内容,两个空的DIV将会放图片。一个是裂开的图片,一个是用于覆盖在第一个图片上面的PNG图片,下面是这两个图片DIV的CSS样式:

[css]
#crack{z-index:1;position:absolute;width:200px;height:600px;background-image:url(../images/crack.png);left:520px;top:0px;}
#crack_overlay{z-index:1000;position:absolute;width:200px;height:600px;background-image:url(../images/crack_over.png);background-position:0px-1100px;left:520px;top:0px;}</div>
[/css]

这里要注意:覆盖层的z-index要比其它的层大,这样才能遮住其它的层。

jQuery and jQuery UI

这里用到了jQuery UI里面的"shake","bounce"和"pulsate"效果。这里把效果的速度设置的比较小,为了看起来效果更好,这里用了随机的间隔时间。

[code lang="js"]
var coord = -1125;

$(document).ready(function() {
setTimeout("shake()", 2000);
});

function reveal()
{
setTimeout("moreCrack(coord)", 200);
}

function shake()
{
coordcoord = coord + 50;
if(coord < -125)
{
$("#crack").effect("shake", {distance: 1}, 40, reveal);
$("#error_code").effect("bounce", {distance: 5}, 50);
$("#error_status").effect("pulsate", {times: 2}, 50);
} else {
$("#crack_overlay").hide();
}
}

function randomXToY(minVal,maxVal,floatVal)
{
var randVal = minVal+(Math.random()*(maxVal-minVal));
return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}

function moreCrack(coord)
{
$("#crack_overlay").animate({backgroundPosition:"(0 " + coord + ")"});
setTimeout("shake()", randomXToY(3500, 5000));
}
[/code]

下载源码包

标签: JQUERY, jQuery UI

添加新评论