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

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

进一步阅读

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

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

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

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

 

 

DEMO DOWNLOAD

 

The HTML

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

404.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>Creating an Animated 404 Page | Tutorialzine Demo</title>
 6 
 7 <!-- Internet Explorer HTML5 enabling script: -->
 8 
 9 <!--[if IE]>
10     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11 <![endif]-->
12 
13 <link rel="stylesheet" type="text/css" href="styles.css" />
14 
15 </head>
16 
17 <body>
18 
19 <div id="rocket"></div>
20 
21 <hgroup>
22     <h1>Page Not Found</h1>
23     <h2>悲剧了亲，我们没有找到你想要的页面.</h2>
24 </hgroup>
25 
26 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
27 <script src="script.js"></script>
28 </body>
29 </html>

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

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

 

The Not Found Rocket

 

The CSS

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

 1 body{
 2     background:url('img/bg.png') no-repeat center center #1d1d1d;
 3     color:#eee;
 4     font-family:Corbel,Arial,Helvetica,sans-serif;
 5     font-size:13px;
 6 }
 7 
 8 #rocket{
 9     width:275px;
10     height:375px;
11     background:url('img/rocket.png') no-repeat;
12     margin:140px auto 50px;
13     position:relative;
14 }
15 
16 /*    Two steam classes. */
17 
18 .steam1,
19 .steam2{
20     position:absolute;
21     bottom:78px;
22     left:50px;
23     width:80px;
24     height:80px;
25     background:url('img/steam.png') no-repeat;
26     opacity:0.8;
27 }
28 
29 .steam2{
30 
31    /*    .steam2 shows the bottom part (dark version)
32     *    of the background image.
33     */
34 
35     background-position:left bottom;
36 }
37 
38 hgroup{
39 
40     /* Using the HTML4 hgroup element */
41 
42     display:block;
43     margin:0 auto;
44     width:850px;
45     font-family:'Century Gothic',Calibri,'Myriad Pro',Arial,Helvetica,sans-serif;
46     text-align:center;
47 }
48 
49 h1{
50     color:#76D7FB;
51     font-size:60px;
52     text-shadow:3px 3px 0 #3D606D;
53     white-space:nowrap;
54 }
55 
56 h2{
57     color:#9FE3FC;
58     font-size:18px;
59     font-weight:normal;
60     padding:25px 0;
61 }

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

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

The jQuery

 

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

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

 1 $(window).load(function(){
 2 
 3     // We are listening for the window load event instead of the regular document ready.
 4 
 5     function animSteam(){
 6 
 7         // Create a new span with the steam1, or steam2 class:
 8 
 9         $('<span>',{
10             className:'steam'+Math.floor(Math.random()*2 + 1),
11             css:{
12                 // Apply a random offset from 10px to the left to 10px to the right
13                 marginLeft    : -10 + Math.floor(Math.random()*20)
14             }
15         }).appendTo('#rocket').animate({
16             left:'-=58',
17             bottom:'-=100'
18         }, 120,function(){
19 
20             // When the animation completes, remove the span and
21             // set the function to be run again in 10 milliseconds
22 
23             $(this).remove();
24             setTimeout(animSteam,10);
25         });
26     }
27 
28     function moveRocket(){
29         $('#rocket').animate({'left':'+=100'},5000).delay(1000)
30                     .animate({'left':'-=100'},5000,function(){
31                 setTimeout(moveRocket,1000);
32         });
33     }
34 
35     // Run the functions when the document and all images have been loaded.
36 
37     moveRocket();
38     animSteam();
39 });

animSteam（）函数是形成烟雾效果的函数。当被调用时，函数运行一个动画， 当第一遍动画完成的时候, 使用 setTimeout 延迟10秒钟重新运行

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

How the Animation is Created

 

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

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

 

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

ErrorDocument 404 /404.html

 

DEMO DOWNLOAD

hide

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

posted @ 2012-10-29 09:10  创想中国(羲闻)  阅读(3990)  评论(20)  编辑  收藏  举报