您的位置：首页 > Web前端 > JQuery

前沿设计推荐-让你的404页面飞起来-使用jquery创建一个会飞的404页面

2012-10-29 09:10 726 查看

这是必然要发生的一件事情，就是当有人输入一个错误的URL或通过一个错误的链接到您的网站。这个就是404页页面显示，在我所见到的404页面当中，几乎很少发现很有个性的404页面能够让用户记住这个网站的页面，大都是弄一张图片来实现，你有没有想过其实可以用动感力很强的动画来实现呢？你可以花时间，并设计一个友好的错误页面，以鼓励用户留在你的网站。

进一步阅读

jquery实现的视差滚动教程(视差大背景效果)

前沿设计推荐-使用jquery打造动感的浮动web界面

jquery视差推荐：nikebetterworld视差平滑滚动效果

今天，正因为这一点。我将创建一个动画404页，您可以轻松地定制和改善。废话少说，看演示附源码下载

DEMO
DOWNLOAD

The HTML

在这里，我们使用新的HTML5文档类型hgroup标签。HEAD部分中，启用了对IE注释的html5条件注释,帮助IE识别html5标签

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>悲剧了亲，我们没有找到你想要的页面.</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>

看上面的html代码，在引入html5脚本文件之后，我们又引用了css样式表，这个你们都懂. 在body标签中, 包含了一个ID是 rocket 的DIV和 html5的标签 hgroup. rocket div 有一张 rocket.png 的图片作为背景, ，它有许多应用，包括相对定位，这是需要的动画风格，下面将会用到.

最后，我们引用jQuery库和script.js文件.

The CSS

rocket的定位是使用图片作为背景相对定位。

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;
}

火箭下面喷射出来的气体叫蒸汽，我们用.steam这样的类表示，他们每个的跨度是 80*80,, 使用 steam.png 作为背景这个图片是两倍的宽度即(160), 。steam1和steam2班的图像显示了各自的图像。定位产生错觉

jQuery向rocket容器创建并且插入蒸汽跨度，并且将它们向相反的方向运动；

The jQuery

正如我们上面所讨论的，jQuery的部分是创建动画的废气。让我们仔细看看这是如何实现的。

该脚本的开头附加一个事件监听器的load事件。，在window.load，将触发不仅是DOM，animSteam()和moveRocket()函数同时被加载。

$(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（）函数是形成烟雾效果的函数。当被调用时，函数运行一个动画，当第一遍动画完成的时候, 使用 setTimeout 延迟10秒钟重新运行

该脚本随机选择第10行之间的steam1和steam2类和跨度水平的margin-left偏移量的一个随机值. 在 animate() 方法中, 从steam的div（这正好是在喷嘴的火箭）的当前位置和移动向左移动58和向下移动100像素到了最下面。如下面

在这之后，我们通过 - 120毫秒来延续动画，动画完成后。然后再回调这个函数，如此反复

两外一个动画的函数- moveRocket（）控制火箭左侧到右侧移动通过修改左侧的CSS属性。animate()[b]moveRocket（）[/b]这两个函数可以同时调用，你也可以调用其中一个，把另外一个注释掉，animate()喷射蒸汽，moveRocket（）从左到右边移动

记住, 使页面显示了一个404错误，你需要给你的.htaccess文件中加入这一行

ErrorDocument 404 /404.html

DEMO DOWNLOAD

hide

本文链接：前沿设计推荐-让你的404页面飞起来-使用jquery创建一个会飞的404页面

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航