时间:2014-01-29所属栏目: Jquery开发 来源: 热度:
如果有人输入一个错误的URL或链接破坏了，那么臭名昭著的404页就必然会出现。为了鼓励用户能返回你的网站，设计一个友好的404页面时必不可少的。
今天，我们就来创建一个404页面。
The HTML
像往常一样，我们开始使用HTML标记。在这里，使用新的HTML标记，在开头，我们注释了一个脚本，让ie可以支持HTML标记。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating an Animated 404 Page | Tutorialzine Demo</title>
<!-- Internet Explorer HTML5 enabling script: -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="rocket"></div>
<hgroup>
<h1>Page Not Found</h1>
<h2>We couldn't find what you were looking for.</h2>
</hgroup>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
这个网页十分简洁，只提供了基本的信息给用户，当然，你可以通过改进它，向用户听够更加具体的信息，并链接到主页。
The Not Found Rocket
The CSS
body{
background:url('img/bg.png') no-repeat center center #1d1d1d;
color:#eee;
font-family:Corbel,Arial,Helvetica,sans-serif;
font-size:13px;
}
#rocket{
width:275px;
height:375px;
background:url('img/rocket.png') no-repeat;
margin:140px auto 50px;
position:relative;
}
/* Two steam classes. */
.steam1,
.steam2{
position:absolute;
bottom:78px;
left:50px;
width:80px;
height:80px;
background:url('img/steam.png') no-repeat;
opacity:0.8;
}
.steam2{
/* .steam2 shows the bottom part (dark version)
* of the background image.
*/
background-position:left bottom;
}
hgroup{
/* Using the HTML4 hgroup element */
display:block;
margin:0 auto;
width:850px;
font-family:'Century Gothic',Calibri,'Myriad Pro',Arial,Helvetica,sans-serif;
text-align:center;
}
h1{
color:#76D7FB;
font-size:60px;
text-shadow:3px 3px 0 #3D606D;
white-space:nowrap;
}
h2{
color:#9FE3FC;
font-size:18px;
font-weight:normal;
padding:25px 0;
}
蒸汽的大小80*80px，背景是steam.png，将利用jQuety像#rocket插入span，.steam1或.steam2，用他们创建出烟的错觉，让火焰看上去有闪烁的变化。
The jQuery
利用window load 事件，可以让页面加载完成后，用户才能看到动画效果。
$(window).load(function(){
// We are listening for the window load event instead of the regular document ready.
function animSteam(){
// Create a new span with the steam1, or steam2 class:
$('<span>',{
className:'steam'+Math.floor(Math.random()*2 + 1),
css:{
// Apply a random offset from 10px to the left to 10px to the right
marginLeft : -10 + Math.floor(Math.random()*20)
}
}).appendTo('#rocket').animate({
left:'-=58',
bottom:'-=100'
}, 120,function(){
// When the animation completes, remove the span and
// set the function to be run again in 10 milliseconds
$(this).remove();
setTimeout(animSteam,10);
});
}
function moveRocket(){
$('#rocket').animate({'left':'+=100'},5000).delay(1000)
.animate({'left':'-=100'},5000,function(){
setTimeout(moveRocket,1000);
});
}
// Run the functions when the document and all images have been loaded.
moveRocket();
animSteam();
});
利用animSteam()函数创建烟雾效果，不断变化产生类似效果.
