目錄
【實戰HTML5與CSS3 第一篇】初探水深，美麗的導航，絢麗的圖片爆炸！！
【實戰HTML5與CSS3 第三篇】我第一個HTML5網頁誕生了(提供源碼)
前言
今天9點就起來了，因為下午出去有個聚會，所以就早點起來進行，否則這個進度有點吃緊啊，昨天初略的完成了導航以及爆炸的圖片，這里來回顧下：
1 導航為一個div背景跟着導航欄目移動，並有一定抖動感覺，這個完全是jquery的東西了，若是用css3我暫時沒有想到解決方案；
2 圖片爆炸功能，這個功能就現在來說都是有很多問題的，都不能用瑕疵來說，第一效果不能達到我的要求，第二性能上恐怕有問題，這塊也亟待優化。
但是，昨天糾結爆炸這塊糾結了4、5個小時，若是現在再耗時間，恐怕這次計划就落空了，所以先以進度為要吧。
絢麗的快速導航
我們來看看他這個快速導航干了些什么？
我們看到他這個效做的十分絢麗的：
點擊快速導航后，整個圖標跑到了中心位置，然后里面的菜單再從幾個方向蹦出來，點擊關閉后又還原了，真是令人動容的用戶感受啊！
那我們來看看該如何實現呢？ 用jquery我想應該是可以實現的，但是我這里想試試CSS3可否完成我的要求，於是我們一起動手吧。
做的過程中我就不完全照着他的方法來了吧，加一點點自己的小創意：那個關閉按鈕我們用CSS3來做！
基本結構如下：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input
{ border: 0 none; margin: 0; padding: 0; } 7 body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000;
font-family: '新宋體' , '宋體' ,Verdana; font-size: 12px; color: #EEEEEE; } 8 9 ul, ol { list-style-type: none; } 10 select, input, img { outline: medium none; vertical-align: middle; } 11 a { text-decoration: none; outline: medium none; } 12 13 #fast_nav { width: 606px; height: 376px; background: url("images/fast_nav_open.png") no-repeat; position: relative;
top: 50px; left: 100px; } 14 #fast_nav_close { width: 24px; height: 24px; border-radius: 14px; border: 1px solid white; position: absolute;
right: -8px; top: -8px; } 15 #fast_nav_close div { background: white; border-radius: 4px; text-indent: -999px; width: 0; height: 0;
border: 1px solid white; transform: rotate(45deg); cursor: pointer; } 16 #fast_nav_close .nav_x { width: 13px; height: 1px; margin: 11px auto; } 17 #fast_nav_close .nav_y { height: 13px; width: 1px; margin: -20px auto; } 18 #fast_nav_bt { background: url("images/fast_nav.png") no-repeat; width: 72px; height: 72px; text-indent: -999px;
position: absolute; left: 267px; top: 152px;} 19 </style> 20 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 21 <script type="text/javascript"> 22 $(document).ready(function () { 23 24 }); 25 26 </script> 27 </head> 28 <body> 29 <div id="fast_nav"> 30 <div id="fast_nav_bt">fast_nav 31 </div> 32 <div id="fast_nav_close"> 33 <div class="nav_x">x 34 </div> 35 <div class="nav_y">y 36 </div> 37 </div> 38 <div id="fast_nav01"> 39 </div> 40 <div id="fast_nav02"> 41 </div> 42 <div id="fast_nav03"> 43 </div> 44 <div id="fast_nav04"> 45 </div> 46 </div> 47 </body> 48 </html>
大家看看右上角的關閉按鈕，這就是我的小花樣！而且在其它瀏覽器上估計會失效。。。但是當做鞏固css3吧，我就不管了。
在最新瀏覽器下叛變結束:
初步排版結束
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input { border: 0 none; margin: 0; padding: 0; } 7 body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋體' , '宋體' ,Verdana; font-size: 12px; color: #EEEEEE; } 8 9 ul, ol { list-style-type: none; } 10 select, input, img { outline: medium none; vertical-align: middle; } 11 a { text-decoration: none; outline: medium none; color: White; } 12 13 #fast_nav { width: 606px; height: 376px; background: url("images/fast_nav_open.png") no-repeat; position: relative; top: 50px; left: 100px; } 14 #fast_nav_close { width: 24px; height: 24px; border-radius: 14px; border: 1px solid white; position: absolute; right: -8px; top: -8px; } 15 #fast_nav_close div { background: white; border-radius: 4px; text-indent: -999px; width: 0; height: 0; border: 1px solid white; transform: rotate(45deg); cursor: pointer; } 16 #fast_nav_close .nav_x { width: 13px; height: 1px; margin: 11px auto; } 17 #fast_nav_close .nav_y { height: 13px; width: 1px; margin: -20px auto; } 18 #fast_nav_bt { background: url("images/fast_nav.png") no-repeat; width: 72px; height: 72px; text-indent: -999px; position: absolute; left: 267px; top: 152px;} 19 20 #fast_nav .list { padding: 26px 0 0 36px; position: absolute; } 21 #fast_nav h3{ margin: 0 0 22px 32px; font-family: "Microsoft YaHei"; font-size: 18px; text-shadow:0 0 2px white; font-weight: normal;} 22 #fast_nav .list li{ line-height: 22px;} 23 #fast_nav01 { left: 0; top: 0; } 24 #fast_nav02 { left: 300px; top: 0; } 25 #fast_nav03 { left: 0; top: 185px; } 26 #fast_nav04 { left: 300px; top: 185px; } 27 #fast_nav02 h3{ margin-right: 46px; text-align: right; } 28 #fast_nav03 h3{ margin: 26px 0 0 44px;} 29 #fast_nav04 h3{ margin: 26px -40px 0 0; text-align: right; } 30 31 </style> 32 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 33 <script type="text/javascript"> 34 $(document).ready(function () { 35 36 }); 37 38 </script> 39 </head> 40 <body> 41 <div id="fast_nav"> 42 <div id="fast_nav_bt"> 43 fast_nav 44 </div> 45 <div id="fast_nav_close"> 46 <div class="nav_x"> 47 x 48 </div> 49 <div class="nav_y"> 50 y 51 </div> 52 </div> 53 <div id="fast_nav01" class="list"> 54 <h3 class="fastCom_title_l"> 55 近期開班信息</h3> 56 <ul> 57 <li>JS周末班 2012年10月13日開班 [已開班]</li><li>JS全日制 2012年10月19日開班 <a 58 href="contact.html">[咨詢]</a></li><li>HTML5周末班 2012年10月21日開班 <a href="contact.html">[咨詢]</a></li><li> 59 JS周末班 2012年11月17日開班 <a href="contact.html">[咨詢]</a></li></ul> 60 </div> 61 <div id="fast_nav02" class="list"> 62 <h3 class="fastCom_title_r"> 63 最新留言</h3> 64 <ul> 65 <li><a href="message.html">老師 這個留言板分頁 鼠標移動上去 就...</a></li><li><a href="message.html"> 66 看到16集里說會開遠程教學，不知道是不...</a></li><li><a href="message.html">這個站做的真的很牛逼呀，貌似后台都是...</a></li><li> 67 <a href="message.html">現在有沒有能加上的Q群啊blue老濕</a></li></ul> 68 </div> 69 <div id="fast_nav03" class="list"> 70 <ul> 71 <li><a href="js02_desc.html#zns_zt_content">JS課程包括哪些內容？</a></li><li><a href="html5_01_desc.html#zns_zt_content"> 72 HTML5課程包括哪些內容？</a></li><li><a href="js02_desc.html#zns_zt_content">課程收費是多少？</a></li><li> 73 <a href="contact.html">我想去學習，如何報名呢？</a></li></ul> 74 <h3 class="fastCom_title_l"> 75 常見問題</h3> 76 </div> 77 <div id="fast_nav04" class="list"> 78 <ul> 79 <li><a href="http://www.zhinengshe.com/news/4.html">積分系統上線</a></li><li><a href="http://www.zhinengshe.com/news/1.html"> 80 邀請碼系統開始公測</a></li><li><a href="http://zhinengshe.com/video.html">視頻教程，已更新到第31集</a></li><li> 81 <a href="http://zhinengshe.com/contact.html">智能社聯系方式</a></li></ul> 82 <h3 class="fastCom_title_r"> 83 綜合其他</h3> 84 </div> 85 </div> 86 </body> 87 </html>
好了，我們繼續，現在是css控制顯示相關的代碼：
css控制開關
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input { border: 0 none; margin: 0; padding: 0; } 7 body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋體' , '宋體' ,Verdana; font-size: 12px; color: #EEEEEE; } 8 9 ul, ol { list-style-type: none; } 10 select, input, img { outline: medium none; vertical-align: middle; } 11 a { text-decoration: none; outline: medium none; color: White; } 12 13 .fast_nav { width: 72px; height: 72px; position: relative; top: 50px; left: 100px;} 14 #fast_nav_close { width: 24px; height: 24px; border-radius: 14px; border: 1px solid white; position: absolute; right: -8px; top: -8px; z-index: 200; display: none; } 15 #fast_nav_close div { background: white; border-radius: 4px; text-indent: -999px; width: 0; height: 0; border: 1px solid white; transform: rotate(45deg); cursor: pointer; } 16 #fast_nav_close .nav_x { width: 13px; height: 1px; margin: 11px auto; } 17 #fast_nav_close .nav_y { height: 13px; width: 1px; margin: -20px auto; } 18 #fast_nav_bt { background: url("images/fast_nav.png") no-repeat; width: 72px; height: 72px; text-indent: -999px; position: absolute; cursor: pointer; z-index: 500;} 19 20 .fast_nav .list { width: 0; height: 0; position: absolute; background: url("images/fast_nav_open.png") no-repeat; } 21 .fast_nav h3{font-family: "Microsoft YaHei"; font-size: 18px; text-shadow:0 0 2px white; font-weight: normal;} 22 .fast_nav .list li{ line-height: 22px;} 23 #fast_nav01 { right: 303px; top: 0; background-position: 0 0;} 24 #fast_nav02 { left: 300px; top: 0; background-position: -303px 0;} 25 #fast_nav03 { right: 303px; top: 185px; background-position: 0 -186px;} 26 #fast_nav04 { left: 300px; top: 185px; background-position: -303px -186px;} 27 28 #fast_nav01 ul{ margin-left: 54px;} 29 #fast_nav02 ul{ margin-left: 54px;} 30 #fast_nav03 ul{ margin-left: 54px; margin-top: 30px;} 31 #fast_nav04 ul{ margin-left: 54px; margin-top: 30px;} 32 33 #fast_nav01 h3{ margin: 26px 0 26px 66px;} 34 #fast_nav02 h3{ margin: 26px 0 26px 150px} 35 #fast_nav03 h3{ margin: 26px 0 0 76px;} 36 #fast_nav04 h3{ margin: 26px 86px 0 0; text-align: right; } 37 38 .fast_nav h3{ display: none; } 39 .fast_nav ul{ display: none; } 40 41 div.open { width: 606px; height: 376px; } 42 div.open #fast_nav_bt { left: 267px; top: 152px; } 43 div.open h3 { display: block; } 44 div.open ul { display: block; } 45 div.open .list{ width: 303px; height: 188px; } 46 47 48 49 </style> 50 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 51 <script type="text/javascript"> 52 $(document).ready(function () { 53 // width: 606px; height: 376px; 54 // transition: width 1s linear, height 1s linear; 55 $('#fast_nav_bt').click(function () { 56 if ($('#fast_nav').hasClass('open')) { 57 $('#fast_nav').removeClass('open'); 58 } else { 59 $('#fast_nav').addClass('open'); 60 } 61 }); 62 }); 63 64 </script> 65 </head> 66 <body> 67 <div id="fast_nav" class="fast_nav"> 68 <div id="fast_nav_bt"> 69 fast_nav 70 </div> 71 <div id="fast_nav_close"> 72 <div class="nav_x"> 73 x 74 </div> 75 <div class="nav_y"> 76 y 77 </div> 78 </div> 79 <div id="fast_nav01" class="list"> 80 <h3 class="fastCom_title_l"> 81 近期開班信息</h3> 82 <ul> 83 <li>JS周末班 2012年10月13日開班 [已開班]</li><li>JS全日制 2012年10月19日開班 <a 84 href="contact.html">[咨詢]</a></li><li>HTML5周末班 2012年10月21日開班 <a href="contact.html">[咨詢]</a></li><li> 85 JS周末班 2012年11月17日開班 <a href="contact.html">[咨詢]</a></li></ul> 86 </div> 87 <div id="fast_nav02" class="list"> 88 <h3 class="fastCom_title_r"> 89 最新留言</h3> 90 <ul> 91 <li><a href="message.html">老師 這個留言板分頁 鼠標移動上去 就...</a></li><li><a href="message.html"> 92 看到16集里說會開遠程教學，不知道是不...</a></li><li><a href="message.html">這個站做的真的很牛逼呀，貌似后台都是...</a></li><li> 93 <a href="message.html">現在有沒有能加上的Q群啊blue老濕</a></li></ul> 94 </div> 95 <div id="fast_nav03" class="list"> 96 <ul> 97 <li><a href="js02_desc.html#zns_zt_content">JS課程包括哪些內容？</a></li><li><a href="html5_01_desc.html#zns_zt_content"> 98 HTML5課程包括哪些內容？</a></li><li><a href="js02_desc.html#zns_zt_content">課程收費是多少？</a></li><li> 99 <a href="contact.html">我想去學習，如何報名呢？</a></li></ul> 100 <h3 class="fastCom_title_l"> 101 常見問題</h3> 102 </div> 103 <div id="fast_nav04" class="list"> 104 <ul> 105 <li><a href="http://www.zhinengshe.com/news/4.html">積分系統上線</a></li><li><a href="http://www.zhinengshe.com/news/1.html"> 106 邀請碼系統開始公測</a></li><li><a href="http://zhinengshe.com/video.html">視頻教程，已更新到第31集</a></li><li> 107 <a href="http://zhinengshe.com/contact.html">智能社聯系方式</a></li></ul> 108 <h3 class="fastCom_title_r"> 109 綜合其他</h3> 110 </div> 111 </div> 112 </body> 113 </html>
點擊展開，再次點擊關閉，這里有個優化點，我判斷的時候是查看dom是否包含class，這個應該放到內存，而不是dom，后面點優化。現在我們看看動畫效果如何實現。
很戳的效果
css很戳的效果
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input { border: 0 none; margin: 0; padding: 0; } 7 body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋體' , '宋體' ,Verdana; font-size: 12px; color: #EEEEEE; } 8 9 ul, ol { list-style-type: none; } 10 select, input, img { outline: medium none; vertical-align: middle; } 11 a { text-decoration: none; outline: medium none; color: White; } 12 13 .fast_nav { width: 72px; height: 72px; position: relative; top: 50px; left: 100px;} 14 #fast_nav_close { width: 24px; height: 24px; border-radius: 14px; border: 1px solid white; position: absolute; right: -8px; top: -8px; z-index: 200; display: none; } 15 #fast_nav_close div { background: white; border-radius: 4px; text-indent: -999px; width: 0; height: 0; border: 1px solid white; transform: rotate(45deg); cursor: pointer; } 16 #fast_nav_close .nav_x { width: 13px; height: 1px; margin: 11px auto; } 17 #fast_nav_close .nav_y { height: 13px; width: 1px; margin: -20px auto; } 18 #fast_nav_bt { background: url("images/fast_nav.png") no-repeat; width: 72px; height: 72px; text-indent: -999px; position: absolute; cursor: pointer; z-index: 500; transition: left 10s linear, top 10s linear;} 19 20 .fast_nav .list { width: 0; height: 0; position: absolute; background: url("images/fast_nav_open.png") no-repeat; transition: width 0.2s linear, height 1s linear; } 21 .fast_nav h3{font-family: "Microsoft YaHei"; font-size: 18px; text-shadow:0 0 2px white; font-weight: normal;} 22 .fast_nav .list li{ line-height: 22px; overflow: hidden;} 23 #fast_nav01 { right: 303px; top: 0; background-position: 0 0;} 24 #fast_nav02 { left: 300px; top: 0; background-position: -303px 0;} 25 #fast_nav03 { right: 303px; top: 185px; background-position: 0 -186px;} 26 #fast_nav04 { left: 300px; top: 185px; background-position: -303px -186px;} 27 28 #fast_nav01 ul{ margin-left: 54px;} 29 #fast_nav02 ul{ margin-left: 54px;} 30 #fast_nav03 ul{ margin-left: 54px; margin-top: 30px;} 31 #fast_nav04 ul{ margin-left: 54px; margin-top: 30px;} 32 33 #fast_nav01 h3{ margin: 26px 0 26px 66px;} 34 #fast_nav02 h3{ margin: 26px 0 26px 150px} 35 #fast_nav03 h3{ margin: 26px 0 0 76px;} 36 #fast_nav04 h3{ margin: 26px 86px 0 0; text-align: right; } 37 38 .fast_nav h3{ display: none; } 39 .fast_nav ul{ display: none; } 40 41 div.open { width: 606px; height: 376px; } 42 div.open #fast_nav_bt { left: 267px; top: 152px; } 43 div.open h3 { display: block; } 44 div.open ul { display: block; } 45 div.open .list{ width: 303px; height: 188px; } 46 47 48 49 </style> 50 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 51 <script type="text/javascript"> 52 $(document).ready(function () { 53 // width: 606px; height: 376px; 54 // transition: width 1s linear, height 1s linear; 55 $('#fast_nav_bt').click(function () { 56 if ($('#fast_nav').hasClass('open')) { 57 $('#fast_nav').removeClass('open'); 58 } else { 59 $('#fast_nav').addClass('open'); 60 } 61 }); 62 }); 63 64 </script> 65 </head> 66 <body> 67 <div id="fast_nav" class="fast_nav"> 68 <div id="fast_nav_bt"> 69 fast_nav 70 </div> 71 <div id="fast_nav_close"> 72 <div class="nav_x"> 73 x 74 </div> 75 <div class="nav_y"> 76 y 77 </div> 78 </div> 79 <div id="fast_nav01" class="list"> 80 <h3 class="fastCom_title_l"> 81 近期開班信息</h3> 82 <ul> 83 <li>JS周末班 2012年10月13日開班 [已開班]</li><li>JS全日制 2012年10月19日開班 <a 84 href="contact.html">[咨詢]</a></li><li>HTML5周末班 2012年10月21日開班 <a href="contact.html">[咨詢]</a></li><li> 85 JS周末班 2012年11月17日開班 <a href="contact.html">[咨詢]</a></li></ul> 86 </div> 87 <div id="fast_nav02" class="list"> 88 <h3 class="fastCom_title_r"> 89 最新留言</h3> 90 <ul> 91 <li><a href="message.html">老師 這個留言板分頁 鼠標移動上去 就...</a></li><li><a href="message.html"> 92 看到16集里說會開遠程教學，不知道是不...</a></li><li><a href="message.html">這個站做的真的很牛逼呀，貌似后台都是...</a></li><li> 93 <a href="message.html">現在有沒有能加上的Q群啊blue老濕</a></li></ul> 94 </div> 95 <div id="fast_nav03" class="list"> 96 <ul> 97 <li><a href="js02_desc.html#zns_zt_content">JS課程包括哪些內容？</a></li><li><a href="html5_01_desc.html#zns_zt_content"> 98 HTML5課程包括哪些內容？</a></li><li><a href="js02_desc.html#zns_zt_content">課程收費是多少？</a></li><li> 99 <a href="contact.html">我想去學習，如何報名呢？</a></li></ul> 100 <h3 class="fastCom_title_l"> 101 常見問題</h3> 102 </div> 103 <div id="fast_nav04" class="list"> 104 <ul> 105 <li><a href="http://www.zhinengshe.com/news/4.html">積分系統上線</a></li><li><a href="http://www.zhinengshe.com/news/1.html"> 106 邀請碼系統開始公測</a></li><li><a href="http://zhinengshe.com/video.html">視頻教程，已更新到第31集</a></li><li> 107 <a href="http://zhinengshe.com/contact.html">智能社聯系方式</a></li></ul> 108 <h3 class="fastCom_title_r"> 109 綜合其他</h3> 110 </div> 111 </div> 112 </body> 113 </html>
這個效果很難看的，完全不是我所希望的，而且點擊快速導航會有一定抖動效果，這個可能又要用jquery實現了。。。
這里還有個問題就是，里面的文字被擠壓，變得非常難看，整個用戶體驗很差，這塊還要繼續了。
完整代碼
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input { border: 0 none; margin: 0; padding: 0; } 7 body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋體' , '宋體' ,Verdana; font-size: 12px; color: #EEEEEE; } 8 9 ul, ol { list-style-type: none; } 10 select, input, img { outline: medium none; vertical-align: middle; } 11 a { text-decoration: none; outline: medium none; color: White; } 12 13 .fast_nav { width: 72px; height: 72px; position: relative; top: 50px; left: 100px;} 14 #fast_nav_close { width: 24px; height: 24px; border-radius: 14px; border: 1px solid white; position: absolute; right: -8px; top: -8px; z-index: 700; display: none; } 15 #fast_nav_close div { background: white; border-radius: 4px; text-indent: -999px; width: 0; height: 0; border: 1px solid white; transform: rotate(45deg); cursor: pointer; } 16 #fast_nav_close .nav_x { width: 13px; height: 1px; margin: 11px auto; } 17 #fast_nav_close .nav_y { height: 13px; width: 1px; margin: -20px auto; } 18 #fast_nav_bt { background: url("images/fast_nav.png") no-repeat; width: 72px; height: 72px; text-indent: -999px; position: absolute; cursor: pointer; z-index: 500; left: 0; top: 0; transition: left 0.3s linear, top 0.3s linear; } 19 20 .fast_nav .list { width: 0; height: 0; position: absolute; background: url("images/fast_nav_open.png") no-repeat; display: none; } 21 .fast_nav h3{font-family: "Microsoft YaHei"; font-size: 18px; text-shadow:0 0 2px white; font-weight: normal;} 22 .fast_nav .list li{ line-height: 22px; overflow: hidden; min-width: 260px; } 23 #fast_nav01 { right: 303px; top: 188px; background-position: 0 0; height: 0; z-index: 400; } 24 #fast_nav02 { background-position: -303px 0; z-index: 399; } 25 #fast_nav03 { background-position: 0 -186px; z-index: 377; } 26 #fast_nav04 { background-position: -303px -186px; z-index: 388; } 27 28 #fast_nav01 ul{ margin-left: 54px;} 29 #fast_nav02 ul{ margin-left: 54px;} 30 #fast_nav03 ul{ margin-left: 54px; margin-top: 30px;} 31 #fast_nav04 ul{ margin-left: 54px; margin-top: 30px;} 32 33 #fast_nav01 h3{ margin: 26px 0 26px 66px;} 34 #fast_nav02 h3{ margin: 26px 0 26px 150px} 35 #fast_nav03 h3{ margin: 26px 0 0 76px;} 36 #fast_nav04 h3{ margin: 26px 86px 0 0; text-align: right; } 37 38 .fast_nav h3{ display: none; } 39 .fast_nav ul{ display: none; } 40 41 div.open { width: 606px; height: 376px; } 42 div.open h3 { display: block; } 43 div.open ul { display: block; } 44 div.open .list { width: 303px; height: 188px; } 45 div.open #fast_nav_bt { left: 267px; top: 152px; } 46 47 /* 48 49 div.open #fast_nav_close { display: block; } 50 div.open h3 { display: block; } 51 div.open ul { display: block; } 52 */ 53 54 55 </style> 56 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 57 <script type="text/javascript"> 58 $(document).ready(function () { 59 var step = 250; 60 // width: 606px; height: 376px; 61 // transition: width 1s linear, height 1s linear; 62 $('#fast_nav_bt').click(function () { 63 click_fast(); 64 }); 65 $('#fast_nav_close').click(function () { 66 click_fast(); 67 }); 68 69 function click_fast() { 70 if ($('#fast_nav').hasClass('open')) { 71 close_nav3(); 72 } else { 73 open_fast(); 74 } 75 } 76 77 function open_fast() { 78 $('#fast_nav').addClass('open'); 79 setTimeout(open_nav1, step) 80 } 81 82 function open_nav1() { 83 $('#fast_nav01').css('width', '303px'); 84 $('#fast_nav01').show(); 85 $('#fast_nav01').animate({ height: '188px', top: '0' }, step, open_nav2); 86 } 87 function open_nav2() { 88 $('#fast_nav02').css({ 'left': '0', 'top': '0' }).show(); 89 $('#fast_nav02').animate({ left: '303px' }, step, open_nav4); 90 } 91 function open_nav3() { 92 $('#fast_nav03').css({ 'left': '303px', 'top': '188px' }).show(); 93 $('#fast_nav03').animate({ left: '0' }, step); 94 $('#fast_nav_close').show(); 95 } 96 function open_nav4() { 97 98 $('#fast_nav04').css({ 'left': '303px', 'top': '0' }).show(); 99 $('#fast_nav04').animate({ top: '188px' }, step, open_nav3); 100 } 101 102 // function close_fast() { 103 // $('#fast_nav_bt').animate({ left: '0', top: '0' }, step, close_nav3); 104 // } 105 function close_nav3() { 106 $('#fast_nav_close').hide(); 107 $('#fast_nav03').stop().animate({ left: '188px' }, step, close_nav4); 108 } 109 function close_nav4() { 110 $('#fast_nav03').hide(); 111 $('#fast_nav04').animate({ top: '0' }, step, close_nav2); 112 } 113 function close_nav2() { 114 $('#fast_nav04').hide(); 115 $('#fast_nav02').animate({ left: '0' }, step, close_nav1); 116 } 117 function close_nav1() { 118 $('#fast_nav02').hide(); 119 $('#fast_nav01').animate({ top: '188px', height: '0' }, step, function () { 120 $('#fast_nav01').css('width', '0'); 121 $('#fast_nav').removeClass('open'); 122 // close_fast(); 123 }).hide(); 124 } 125 126 }); 127 128 </script> 129 </head> 130 <body> 131 <div id="fast_nav" class="fast_nav"> 132 <div id="fast_nav_bt"> 133 fast_nav 134 </div> 135 <div id="fast_nav_close"> 136 <div class="nav_x"> 137 x 138 </div> 139 <div class="nav_y"> 140 y 141 </div> 142 </div> 143 <div id="fast_nav01" class="list"> 144 <h3 class="fastCom_title_l"> 145 近期開班信息</h3> 146 <ul> 147 <li>JS周末班 2012年10月13日開班 [已開班]</li><li>JS全日制 2012年10月19日開班 <a 148 href="contact.html">[咨詢]</a></li><li>HTML5周末班 2012年10月21日開班 <a href="contact.html">[咨詢]</a></li><li> 149 JS周末班 2012年11月17日開班 <a href="contact.html">[咨詢]</a></li></ul> 150 </div> 151 <div id="fast_nav02" class="list"> 152 <h3 class="fastCom_title_r"> 153 最新留言</h3> 154 <ul> 155 <li><a href="message.html">老師 這個留言板分頁 鼠標移動上去 就...</a></li><li><a href="message.html"> 156 看到16集里說會開遠程教學，不知道是不...</a></li><li><a href="message.html">這個站做的真的很牛逼呀，貌似后台都是...</a></li><li> 157 <a href="message.html">現在有沒有能加上的Q群啊blue老濕</a></li></ul> 158 </div> 159 <div id="fast_nav03" class="list"> 160 <ul> 161 <li><a href="js02_desc.html#zns_zt_content">JS課程包括哪些內容？</a></li><li><a href="html5_01_desc.html#zns_zt_content"> 162 HTML5課程包括哪些內容？</a></li><li><a href="js02_desc.html#zns_zt_content">課程收費是多少？</a></li><li> 163 <a href="contact.html">我想去學習，如何報名呢？</a></li></ul> 164 <h3 class="fastCom_title_l"> 165 常見問題</h3> 166 </div> 167 <div id="fast_nav04" class="list"> 168 <ul> 169 <li><a href="http://www.zhinengshe.com/news/4.html">積分系統上線</a></li><li><a href="http://www.zhinengshe.com/news/1.html"> 170 邀請碼系統開始公測</a></li><li><a href="http://zhinengshe.com/video.html">視頻教程，已更新到第31集</a></li><li> 171 <a href="http://zhinengshe.com/contact.html">智能社聯系方式</a></li></ul> 172 <h3 class="fastCom_title_r"> 173 綜合其他</h3> 174 </div> 175 </div> 176 </body> 177 </html>
到此功能代碼大概完成，只剩下優化部分需要處理了。
結語
今天的任務沒能完成，本來計划的是先做這個快遞導航特效，然后再做一點本地數據庫的東西，然后就差最后的排版了。
誰知道，快速導航這塊工作量還不少，花了不少時間，加之今天5.1出去聚會了，到現在才回來，所以這篇文章有點粗制濫造了。
對於本功能，開始想的是使用css3動畫效果，但是他的特效很強大，css3恐怕有點吃力，所以這里就用了jquery的動畫效果了，
但是，你知道jquery的效率的，代碼上的特效運行幾次后就這個樣子了：
很燒CPU的，所以這塊功能還需要優化。
觀察這兩天的工作量，明天估計最樂觀就是把首頁完成了。。。