我生待明日,万事成蹉跎

使用jquery制作一个会飞的404页面!

这是必然要发生的一件事情,就是当有人输入一个错误的URL或通过一个错误的链接到您的网站。这个就是404页页面显示,在我所见到的404页面当中,几乎很少发现很有个性的404页面能够让用户记住这个网站的页面,大都是弄一张图片来实现,你有没有想过其实可以用动感力很强的动画来实现呢?你可以花时间,并设计一个友好的错误页面,以鼓励用户留在你的网站。
今天,正在这一点。我将创建一个动画404页,您可以轻松地定制和改善。废话少说,先看演示

在这里,我们使用新的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文件(第一张图)

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像素到了最下面。如下面

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

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

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

ErrorDocument 404 /404.html

未经允许不得转载:徐宏涛博客 » 使用jquery制作一个会飞的404页面!

分享到:更多 ()

评论 2

评论前必须登录!

  1. #1

    什么也看不懂

    尘埃哥5年前 (2012-11-02)
    • 这篇是转载的,呵呵~我好多知识也忘嘞。。。温习下,大家共同记录、进步[ali拍拍手]

      一次远足5年前 (2012-11-02)