2009年9月

用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]

下载源码包

在浏览器上玩NES Games

        国外的开发者Nox用javascript写了一个NES模拟器(JSNES),它可以让你在web浏览器上玩NES的游戏,真是太强大了。可以进这个地址试试看,不能在IE上面玩。作者这样说的:

I highly recommend you use Google Chrome to play JSNES. Thanks to its high performance canvas element, and a clever optimisation by Connor Dunn, it runs at full speed on modern computers. Mac builds are also available. Otherwise, it just about runs on Firefox 3.5 or Safari 4, but it's hardly playable.

        强烈建议大家在Google Chrome上面玩JSNES,这样才能获取最高的性能优势,当然也可以在firefox3.5和Safari4上面玩,但是运行起来很吃力,我刚才尝试了一下,确实比较慢,CPU飙升-_-,但用Chrome玩起来还是比较流畅的。以下为两个游戏截图。

可以点这个地址进入试玩:http://benfirshman.com/projects/jsnes/