火箭404错误页面特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是火箭404错误页面特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为火箭404错误页面，属于站长常用代码" />
<title>火箭404错误页面</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body style="text-align:center">
<!-- 代码 开始 -->
<div id="rocket"></div>
<hgroup>
    <h1>Page Not Found</h1>
    <h2>We couldn't find what you were looking for.</h2>
</hgroup>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

JS代码(script.js):

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

CSS代码(styles.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:60px auto 10px;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:40px;text-shadow:3px 3px 0 #3D606D;white-space:nowrap;}
h2{color:#9FE3FC;font-size:18px;font-weight:normal;padding-bottom:15px;}
/* Only Needed For The Demo Page */
p.createdBy{font-size:15px;font-weight:normal;margin:50px;text-align:center;text-shadow:none;}
a,a:visited{text-decoration:none;outline:none;border-bottom:1px dotted #97cae6;color:#97cae6;}
a:hover{border-bottom:1px dashed transparent;}

附件:下载该文件资源,减少时间成本(增值服务)