用jQuery和jQuery UI做的404错误页面效果，裂开和振动的效果，蛮逼真的，点击下面的图片查看效果：
HTML & CSS
首先建一个简单的html页面，当然你自己运用这个404页面的时候可以加一些自己的东西，例如，网站首页链接、网站导航等，这里我们为了演示就简单些了：
<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>
有几个DIV里面放文本内容，两个空的DIV将会放图片。一个是裂开的图片，一个是用于覆盖在第一个图片上面的PNG图片，下面是这两个图片DIV的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>
这里要注意：覆盖层的z-index要比其它的层大，这样才能遮住其它的层。
jQuery and jQuery UI
这里用到了jQuery UI里面的”shake”，”bounce”和”pulsate”效果。这里把效果的速度设置的比较小，为了看起来效果更好，这里用了随机的间隔时间。
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));
}
下载源码包
