jQuery创建一个404动画页面

最新推荐文章于 2022-05-24 13:56:24 发布

置顶 ggupjiji

最新推荐文章于 2022-05-24 13:56:24 发布

阅读量598

点赞数

文章标签： jquery function stylesheet html animation url

如果有人输入一个错误的URL或链接破坏了，那么臭名昭著的404 页就必然会出现。为了鼓励用户能返回你的网站，设计一个友好的404页面时必不可少的。
今天，我们就来创建一个404页面。

Demo Download

The HTML

像往常一样，我们开始使用HTML标记。在这里，使用新的HTML标记，在开头，我们注释了一个脚本，让ie可以支持HTML标记。

404.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() 函数创建烟雾效果，不断变化产生类似效果.

( 文章来源： http://tutorialzine.com )

ggupjiji

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery创建一个404动画页面

<br />如果有人输入一个错误的URL或链接破坏了，那么臭名昭著的404页就必然会出现。为了鼓励用户能返回你的网站，设计一个友好的404页面时必不可少的。<br />今天，我们就来创建一个404页面。DemoDownload<br />The HTML<br />像往常一样，我们开始使用HTML标记。在这里，使用新的HTML标记，在开头，我们注释了一个脚本，让ie可以支持HTML标记。404.html<!DOCTYPE html><html><head><meta http-equ
复制链接

扫一扫