【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！
生活随笔
收集整理的這篇文章主要介紹了
【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
【實戰HTML5與CSS3 第一篇】初探水深，美麗的導航，絢麗的圖片爆炸！！
【實戰HTML5與CSS3 第二篇】絢麗的快速導航！
【實戰HTML5與CSS3 第三篇】我第一個HTML5網頁誕生了(提供源碼)
?
前言
先八卦一下，我昨天離職了，把電腦也退了，離職前，我發了一封郵件給整個部門，陳述自己的不舍與團隊管理問題（估計傳說中的leader要抓狂了），然后就昏昏的回家了，所以昨天沒有什么產出。
最近經常有朋友驚嘆我的發帖速度很快，其實是有原因的，我最近兩周要離職，所以就不太理我那傳說中的leader了，每天多出很多時間可以學習。
但是，下周后便會入職一家新公司了，我已經有感覺進去一段時間會很忙，會很有壓力，這正是我所希望的，所以便不會向這樣發帖了，
以后的話，一周能發10-15篇我感覺都不錯了，為了我的理想“兩年成為國內優秀的web前端技術人員”我會努力的。
廢話結束，讓我們進入正題，終于到了今天了，我這個五一是帶著任務與覺悟來的，這幾天我會試著以html5與css3實現這個網站：
http://www.zhinengshe.com/index.html
這是我見過的一個html5與css3比較好的網站了（因為見得不多），要做什么，我等下再一一說明。
我們會做什么？
無圖無真相，我們先上幾張圖:
用高版本瀏覽器進入的同學會發現，他們的網站時做得很漂亮的，有很多不錯的特效，我這里為鞏固html5與css3的知識會嘗試以下東西：
目錄
首頁左下角新聞相關數據采用本地數據庫
使用最新的布局標簽（并考慮向下兼容）
聯系我們這塊會用Geolocation api
期間還會用到其它一些東西，都只有看工作量說話了，因為我只有5.1的時間。時間多的話就全做，時間不夠的話可能只做首頁了。
好了，讓我們開始吧，我們一步步來，第一步，完成其中的小特效：
美麗的導航
他這個導航還是很有特色的喲，先不看他們的實現，若是我做的話，后面估計會是背景圖，然后會有點事件吧，光說不練，我還是試試吧！
初步效果 1 <!DOCTYPE html> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title> 6 <style type="text/css"> 7 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; } 8 body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋體','宋體',Verdana; font-size: 12px; color: #EEEEEE;} 9 10 ul, ol { list-style-type: none; } 11 select, input, img { outline: medium none; vertical-align: middle; } 12 a { text-decoration: none; outline: medium none;} 13 14 .nav { width: 720px; background:url("images/navBg.png") no-repeat; height: 77px; padding-left: 40px; position: relative; z-index: 10; } 15 .nav div { position: absolute; background:url("images/navA_hover.png") no-repeat; width: 116px; height: 78px; text-indent: -999px; top: -2px; z-index: -10; } 16 .nav ul{ } 17 .nav ul li{ display: inline-block; line-height: 60px; height: 77px; width: 106px; text-align: center; margin: 0 2px;} 18 .nav ul li a { font-size: 14px; color: White; text-shadow: 1px 1px 1px #000000; font-family: Verdana;} 19 .nav ul li a:hover { color: #63B1FF; text-shadow: 1px 1px 1px #000000; } 20 .nav ul li span { background: none repeat scroll 0 0 #FFFFFF; box-shadow: 1px 1px 0 #000000; height: 14px; margin: 24px -8px 0 0; overflow: hidden; vertical-align: top; width: 1px; float: right;} 21 22 </style> 23 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 24 <script type="text/javascript"> 25 $(document).ready(function () { 26 var div_hover = $('#nav div'); 27 $('#nav ul').delegate('li', 'mouseenter', function (e) { 28 var el = $(this), 29 offset = el.offset(); 30 div_hover.css('left', offset.left + 'px'); 31 var s = ''; 32 }); 33 }); 34 35 </script> 36 </head> 37 <body> 38 <nav class="nav" id="nav"> 39 <div>hover</div> 40 <ul> 41 <li><a href="javascript:;">首頁</a><span></span></li> 42 <li><a href="javascript:;">JS課程</a><span></span></li> 43 <li><a href="javascript:;">HTML5課程</a><span></span></li> 44 <li><a href="javascript:;">視頻課程</a><span></span></li> 45 <li><a href="javascript:;">課程案例</a><span></span></li> 46 <li><a href="javascript:;">聯系方式</a></li> 47 </ul> 48 </nav> 49 </body> 50 </html>我的做法與原來的不太一致，就實現上來說我我的就是個試驗品，與原版的無法比的，先看看我們這里干了些什么：
基本布局如下：
<nav class="nav" id="nav"><div>hover</div><ul><li><a href="javascript:;">首頁</a><span></span></li><li><a href="javascript:;">JS課程</a><span></span></li><li><a href="javascript:;">HTML5課程</a><span></span></li><li><a href="javascript:;">視頻課程</a><span></span></li><li><a href="javascript:;">課程案例</a><span></span></li><li><a href="javascript:;">聯系方式</a></li></ul> </nav>原網站布局我們這里就不說了，我這里使用了nav標簽，nav標簽據說有助于語義化，seo，盲人/手機閱讀器，既然這么多好處，我們就使用吧。。。
這里也貼個原網站結果算了：
他這里沒有使用ul標簽，我們說不管白貓黑貓能實現功能就是好貓，所以這里我就不關注他了，只看我自己的：
我這里布局實現代碼沒什么好說的，主要注意：
div是絕對定位的，nav是相對定位的，為他們設置了z-index相關用于顯示，不用想在其它瀏覽器上估計會有bug；
然后使用了前面說的冒泡機制，將所有事件綁定到ul上，鼠標進入時，便記錄lleft位置，然后改變div位置即可，這里還沒有動畫效果，等下加上。
PS：在其它瀏覽器下會很恐怖的，不建議看，后面我們在考慮下漸進增強
導航完整代碼 1 <!DOCTYPE html> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title> 6 <style type="text/css"> 7 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; } 8 body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋體','宋體',Verdana; font-size: 12px; color: #EEEEEE;} 9 10 ul, ol { list-style-type: none; } 11 select, input, img { outline: medium none; vertical-align: middle; } 12 a { text-decoration: none; outline: medium none;} 13 14 .nav { width: 720px; background:url("images/navBg.png") no-repeat; height: 77px; padding-left: 40px; position: relative; z-index: 10; } 15 .nav div { position: absolute; background:url("images/navA_hover.png") no-repeat; width: 116px; height: 78px; text-indent: -999px; top: -2px; z-index: -10; } 16 .nav ul{ } 17 .nav ul li{ display: inline-block; line-height: 60px; height: 77px; width: 106px; text-align: center; margin: 0 2px;} 18 .nav ul li a { font-size: 14px; color: White; text-shadow: 1px 1px 1px #000000; font-family: Verdana;} 19 .nav ul li a:hover { color: #63B1FF; text-shadow: 1px 1px 1px #000000; } 20 .nav ul li span { background: none repeat scroll 0 0 #FFFFFF; box-shadow: 1px 1px 0 #000000; height: 14px; margin: 24px -8px 0 0; overflow: hidden; vertical-align: top; width: 1px; float: right;} 21 22 </style> 23 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 24 <script type="text/javascript"> 25 $(document).ready(function () { 26 var div_hover = $('#nav div'); 27 $('#nav ul').delegate('li', 'mouseenter', function (e) { 28 var el = $(this), 29 offset = el.offset(), 30 time_step = 100; 31 div_hover.animate({ left: (offset.left + 20) + 'px' }, time_step).animate({ left: (offset.left - 20) + 'px' }, time_step).animate({ left: (offset.left) + 'px' }, time_step); 32 var s = ''; 33 }); 34 }); 35 36 </script> 37 </head> 38 <body> 39 <nav class="nav" id="nav"> 40 <div>hover</div> 41 <ul> 42 <li><a href="javascript:;">首頁</a><span></span></li> 43 <li><a href="javascript:;">JS課程</a><span></span></li> 44 <li><a href="javascript:;">HTML5課程</a><span></span></li> 45 <li><a href="javascript:;">視頻課程</a><span></span></li> 46 <li><a href="javascript:;">課程案例</a><span></span></li> 47 <li><a href="javascript:;">聯系方式</a></li> 48 </ul> 49 </nav> 50 51 </body> 52 </html>這個導航完整代碼，差是查了一點，但是還是可以看的。但是他整個過程不夠平滑，因為我每移過一個li他便聽一下，有時候我無意義的移過一個導航
他也會有所反應，這就造成了資源浪費與不好的用戶體驗，所以我們需要修正，還有其它一點細節：
最終版 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 7 { 8 border: 0 none; 9 margin: 0; 10 padding: 0; 11 } 12 body 13 { 14 background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; 15 font-family: '新宋體' , '宋體' ,Verdana; 16 font-size: 12px; 17 color: #EEEEEE; 18 } 19 20 ul, ol 21 { 22 list-style-type: none; 23 } 24 select, input, img 25 { 26 outline: medium none; 27 vertical-align: middle; 28 } 29 a 30 { 31 text-decoration: none; 32 outline: medium none; 33 } 34 35 .nav 36 { 37 width: 720px; 38 background: url("images/navBg.png") no-repeat; 39 height: 77px; 40 padding-left: 40px; 41 position: relative; 42 z-index: 10; 43 } 44 .nav div 45 { 46 position: absolute; 47 background: url("images/navA_hover.png") no-repeat; 48 width: 116px; 49 height: 78px; 50 text-indent: -999px; 51 top: -2px; 52 z-index: -10; 53 } 54 .nav ul 55 { 56 } 57 .nav ul li 58 { 59 display: inline-block; 60 line-height: 60px; 61 height: 77px; 62 width: 106px; 63 text-align: center; 64 margin: 0 2px; 65 } 66 .nav ul li a 67 { 68 font-size: 14px; 69 color: White; 70 text-shadow: 1px 1px 1px #000000; 71 font-family: Verdana; 72 } 73 .nav ul li a:hover 74 { 75 color: #63B1FF; 76 text-shadow: 1px 1px 1px #000000; 77 } 78 .nav ul li span 79 { 80 background: none repeat scroll 0 0 #FFFFFF; 81 box-shadow: 1px 1px 0 #000000; 82 height: 14px; 83 margin: 24px -8px 0 0; 84 overflow: hidden; 85 vertical-align: top; 86 width: 1px; 87 float: right; 88 } 89 </style> 90 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 91 <script type="text/javascript"> 92 $(document).ready(function () { 93 var div_hover = $('#nav div'); 94 95 $('#nav ul').delegate('li', 'mouseenter', function (e) { 96 var el = $(this), 97 el_left = el.offset().left, 98 div_left = div_hover.offset().left; 99 time_step = 100; 100 101 div_hover.stop().animate({ left: el_left + 'px' }, time_step, function () { 102 if (el_left > div_left) { 103 div_hover.animate({ left: (el_left - 20) + 'px' }, time_step).animate({ left: el_left + 'px' }, time_step); 104 } else { 105 div_hover.animate({ left: (el_left + 20) + 'px' }, time_step).animate({ left: el_left + 'px' }, time_step); 106 } 107 }); 108 109 var s = ''; 110 }); 111 }); 112 113 </script> 114 </head> 115 <body> 116 <nav class="nav" id="nav"> 117 <div> 118 hover</div> 119 <ul> 120 <li><a href="javascript:;">首頁</a><span></span></li> 121 <li><a href="javascript:;">JS課程</a><span></span></li> 122 <li><a href="javascript:;">HTML5課程</a><span></span></li> 123 <li><a href="javascript:;">視頻課程</a><span></span></li> 124 <li><a href="javascript:;">課程案例</a><span></span></li> 125 <li><a href="javascript:;">聯系方式</a></li> 126 </ul> 127 </nav> 128 </body> 129 </html>雖然仍無法與原版媲美，但是已經比原來平滑多了，我做到這個程度基本上夠了。
總結：
這塊代碼其實還是主要是jquery的東西，我們CSS3中的transitions也可以具備動畫效果，但是這里使用他就感覺不太合適，
因為這里背景到達時有一定抖動效果；然后每次都會計算當前鼠標位置，所以除了js實現外，我還找不到好的辦法呢。
絢麗的圖片輪詢
?
大家都看到了，他這個圖片輪詢展示結束后會碎成一塊一塊的，對于他的實現，至于你懂不懂，反正我是不懂了！！！
對于他的實現，我這邊就當真一頭霧水了，他的效果是令人驚艷的：
1 圖片會碎成12塊
2 每塊會選擇不同的反轉，漸漸隱藏
PS：剛剛不注意點了下自動排版，我的css結構給破壞啦。。。將就用吧
我們來看看原版的html結構：
1 <div class="slide"> 2 <a class="slide_img" target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1030939631&amp;site=qq&amp;menu=yes" 3 style="background: url("images/index_pic/2.png") no-repeat scroll 0% 0% transparent;"> 4 </a> 5 <div class="number"> 6 <div> 7 <a href="javascript:;"></a><span></span><a href="javascript:;"></a><span></span> 8 <a href="javascript:;"></a><span></span><a href="javascript:;"></a><span></span> 9 <a href="javascript:;"></a> 10 </div> 11 </div> 12 <div class="number2"> 13 <div> 14 <a class="active" href="javascript:;" style="opacity: 1;"></a><span></span><a href="javascript:;" 15 class="" style="opacity: 0;"></a><span></span><a href="javascript:;" class="" style="opacity: 0;"> 16 </a><span></span><a href="javascript:;" class="" style="opacity: 0;"></a><span> 17 </span><a href="javascript:;" class="" style="opacity: 0;"></a> 18 </div> 19 </div> 20 <a id="prev" class="prev" href="javascript:;"></a><a id="prev_active" class="prev_active" 21 href="javascript:;"></a><a id="next" class="next" href="javascript:;"></a><a id="next_active" 22 class="next_active" href="javascript:;"></a> 23 </div>里面有很多明奇妙的東西的，我們關注2-4行即可，這里我們發現，他其實就是一個a標簽顯示的圖片是其背景圖片了。
但其在IE（低版本瀏覽器）下結構如下：
所以我有理由相信，這可能是個完整的插件，而且做了向下兼容的喲，上面的導航亦有可能如此，具體我們先不關注，繼續向下。
現在假想我們就是在最新的瀏覽器下，那么他這個特效應該如何實現呢？哎，確實不知道，查個資料吧。。。
最后網上發現了個代碼，寫得有點復雜，我真的打開一看，直接給跪了，代碼大概就600行了，天知道里面有些什么，而且還沒有寫注釋呢，看來我確實是想不出來了。。。。
于是我跟個小白似的在google里面檢索“圖片爆炸”，由陸陸續續出來了許多很酷的效果，我真的直接給跪了。。。。
PS:剛剛干其他研究搞久了，這邊寫了很多東西給死機了，然后一些內容就給丟失了！！！！
總之，圖片爆炸這種功能網上還是有不少的，但是，代碼都有點多，我這里不想調用其它插件，也不能寫出來，就只好往戳的地方走。
比較戳的辦法：
如圖，外層一個div寬度高度固定，其背景圖便是我們展示的圖片，其內部有12個div絕對定位，再操作background-position形成以上圖片。
現在，我們就只是操作12個div爆炸即可，其實這也不容易的。。。
最戳最原始的結果 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 .outer { background: url("pic/5.png") no-repeat; width: 804px; height: 306px; position: relative; margin: 100px;} 7 .outer div { background: url("pic/5.png") no-repeat; width: 134px; height: 153px; position: absolute; transition: transform 1s linear; } 8 </style> 9 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 10 <script type="text/javascript"> 11 $(document).ready(function () { 12 $('#test').click(function () { 13 $('.outer div').each(function (i) { 14 var el = $(this); 15 var step = 200; 16 var x = 0, y = 0; 17 var reg = Math.round(Math.random() * 80); 18 if (i < 3) { 19 x = -1 * step; 20 y = -1 * step; 21 } else if (i < 6) { 22 x = step; 23 y = -1 * step; 24 } else if (i < 9) { 25 x = -1 * step; 26 y = step; 27 } else { 28 x = step; 29 y = step; 30 } 31 el.css('transform', 'translate(' + x + 'px, ' + y + 'px) skew(' + reg + 'deg)'); 32 setTimeout(function () { 33 el.hide(); 34 }, 1000); 35 36 }); 37 }); 38 39 $('.outer div').each(function (i) { 40 var el = $(this); 41 var y = i > 5 ? 153 : 0, 42 x = i > 5 ? i - 6 : i; 43 el.css({ 'left': (x * 134) + 'px', 'top': y + 'px', 'background-position': (-1 * x * 134) + 'px ' + (-1 * y) + 'px' }); 44 var s = ''; 45 }); 46 }); 47 48 </script> 49 </head> 50 <body> 51 <input type="button" id="test" value="變形"/> 52 <div class="outer"> 53 <div> 54 1</div> 55 <div> 56 2</div> 57 <div> 58 3</div> 59 <div> 60 4</div> 61 <div> 62 5</div> 63 <div> 64 6</div> 65 <div> 66 7</div> 67 <div> 68 8</div> 69 <div> 70 9</div> 71 <div> 72 10</div> 73 <div> 74 11</div> 75 <div> 76 12</div> 77 </div> 78 </body> 79 </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 .outer { background: url("pic/5.png") no-repeat; width: 804px; height: 306px; position: relative; margin: 100px;} 7 .outer div { background: url("pic/5.png") no-repeat; width: 134px; height: 153px; position: absolute; transition: transform 0.5s linear; } 8 </style> 9 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 10 <script type="text/javascript"> 11 $(document).ready(function () { 12 $('#test').click(function () { 13 $('.outer div').each(function (i) { 14 var el = $(this); 15 var step = 200; 16 var x = 0, y = 0; 17 var regx = Math.round(Math.random() * 60); 18 var regy = Math.round(Math.random() * 60); 19 if (i < 3) { 20 x = -1 * step; 21 y = -1 * step; 22 } else if (i < 6) { 23 x = step; 24 y = -1 * step; 25 } else if (i < 9) { 26 x = -1 * step; 27 y = step; 28 } else { 29 x = step; 30 y = step; 31 } 32 el.css('transform', 'translate(' + x + 'px, ' + y + 'px) skew(' + regx + 'deg, ' + regy + 'deg)');33 setTimeout(function () { 34 el.hide(); 35 }, 500); 36 37 }); 38 }); 39 40 $('.outer div').each(function (i) { 41 var el = $(this); 42 var y = i > 5 ? 153 : 0, 43 x = i > 5 ? i - 6 : i; 44 el.css({ 'left': (x * 134) + 'px', 'top': y + 'px', 'background-position': (-1 * x * 134) + 'px ' + (-1 * y) + 'px' }); 45 var s = ''; 46 }); 47 }); 48 49 </script> 50 </head> 51 <body> 52 <input type="button" id="test" value="變形"/> 53 <div class="outer"> 54 <div> 55 1</div> 56 <div> 57 2</div> 58 <div> 59 3</div> 60 <div> 61 4</div> 62 <div> 63 5</div> 64 <div> 65 6</div> 66 <div> 67 7</div> 68 <div> 69 8</div> 70 <div> 71 9</div> 72 <div> 73 10</div> 74 <div> 75 11</div> 76 <div> 77 12</div> 78 </div> 79 </body> 80 </html>?
功能看似實現了，但是這個樣子非常不好，因為我一次性操作了12個div并且進行了較復雜的動畫操作，這個樣子對整個頁面性能勢必是有影響的！！！
若是各位在google下不能運行，需要改下代碼，在css上面加上-webkit前綴
好了，差是差點，但是為了追求功能的完整，我還是先將這個功能完成，再慢慢優化吧！！！
PS：動畫很燒CPU的，原版的依舊燒CPU，越是絢麗的效果，對性能影響越大！！！
flash完整代碼 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 7 { 8 border: 0 none; 9 margin: 0; 10 padding: 0; 11 } 12 body 13 { 14 background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; 15 font-family: '新宋體' , '宋體' ,Verdana; 16 font-size: 12px; 17 color: #EEEEEE; 18 overflow: hidden; 19 } 20 #flash 21 { 22 background: url("images/slideBg.png") no-repeat; 23 width: 1010px; 24 height: 385px; 25 position: relative; 26 } 27 .outer 28 { 29 background: url("pic/1.png") no-repeat; 30 width: 840px; 31 height: 306px; 32 position: relative; 33 transition: background-image 10s linear; 34 border-radius: 10px; 35 top: 32px; 36 left: 84px; 37 } 38 .outer div 39 { 40 background: url("pic/1.png"); 41 width: 134px; 42 height: 153px; 43 position: absolute; 44 transition: transform 0.5s linear; 45 text-indent: -999px; 46 } 47 .bt 48 { 49 display: inline-block; 50 background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; 51 width: 41px; 52 height: 42px; 53 text-indent: -999px; 54 position: absolute; 55 opacity: 0.5; 56 transition: opacity 1s linear; 57 } 58 #pre 59 { 60 background-position: -274px -43px; 61 top: 160px; 62 left: 20px; 63 64 } 65 #next 66 { 67 background-position: -315px -43px; 68 top: 160px; 69 right: 20px; 70 } 71 #pre:hover 72 { 73 background-position: -273px 0; 74 opacity: 1; 75 } 76 #next:hover 77 { 78 background-position: -314px 0; 79 opacity: 1; 80 } 81 #pager 82 { 83 position: absolute; 84 bottom: 14px; 85 right: 100px; 86 } 87 #pager a 88 { 89 display: inline-block; 90 width: 24px; 91 height: 24px; 92 background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; 93 opacity: 0.5; 94 transition: opacity 1s linear; 95 background-position: -143px -1px; 96 text-indent: -999px; 97 } 98 #pager .sec 99 { 100 opacity: 1; 101 background-position: -119px -1px; 102 } 103 #pager a:hover 104 { 105 opacity: 1; 106 background-position: -119px -1px; 107 } 108 </style> 109 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 110 <script type="text/javascript"> 111 $(document).ready(function () { 112 var index = 1; 113 var timer = null; 114 $('#outer div').each(function (i) { 115 var el = $(this); 116 var y = i > 5 ? 153 : 0, 117 x = i > 5 ? i - 6 : i; 118 el.css({ 'left': (x * 134) + 'px', 'top': y + 'px', 'background-position': (-1 * x * 134) + 'px ' + (-1 * y) + 'px' }); 119 var s = ''; 120 }); 121 function setFlash() { 122 if (timer) clearTimeout(timer); 123 $('#outer').css('background-image', 'url("pic/' + index + '.png")'); 124 $('#pager a').removeClass('sec'); 125 $('#pager .p' + index).addClass('sec'); 126 $('#outer div').each(function (i) { 127 var el = $(this); 128 var step = 200; 129 var x = 0, y = 0; 130 var regx = Math.round(Math.random() * 80); 131 var regy = Math.round(Math.random() * 80); 132 var r1 = Math.random() > 0.5 ? 1 : -1; 133 var r2 = Math.random() > 0.5 ? 1 : -1; 134 if (i < 3) { 135 x = -1 * step; 136 y = -1 * step; 137 } else if (i < 6) { 138 x = step; 139 y = -1 * step; 140 } else if (i < 9) { 141 x = -1 * step; 142 y = step; 143 } else { 144 x = step; 145 y = step; 146 } 147 x += r1 * Math.random() * step; 148 y += r2 * Math.random() * step; 149 el.css('transform', 'translate(' + x + 'px, ' + y + 'px) skew(' + regx + 'deg, ' + regy + 'deg)'); 150 151 setTimeout(function () { 152 el.css('transform', ''); 153 el.css('background-image', 'url("pic/' + index + '.png")'); 154 }, 500); 155 }); 156 } 157 $('#pre').click(function () { 158 if (index == 1) index = 5; else index--; 159 setFlash(); 160 }); 161 $('#next').click(function () { 162 if (index == 5) index = 1; else index++; 163 setFlash(); 164 }); 165 $('#pager').delegate('a', 'click', function () { 166 var el = $(this); 167 var num = el.html(); 168 index = num; 169 setFlash(); 170 }); 171 var func = function () { 172 if (index == 5) index = 1; else index++; 173 setFlash(); 174 timer = setTimeout(func, 3000); 175 } 176 timer = setTimeout(function () { 177 func(); 178 }, 3000); 179 180 181 }); 182 183 </script> 184 </head> 185 <body> 186 <div id="flash"> 187 <a id="pre" href="javascript:;" class="bt">pre</a> <a id="next" href="javascript:;" class="bt">next</a> 188 <div id="pager"> 189 <a class="p1" href="javascript:;" >1</a> 190 <a class="p2" href="javascript:;" >2</a> 191 <a class="p3" href="javascript:;" >3</a> 192 <a class="p4" href="javascript:;" >4</a> 193 <a class="p5" href="javascript:;" >5</a> 194 </div> 195 <div class="outer" id="outer"> 196 <div> 197 1</div> 198 <div> 199 2</div> 200 <div> 201 3</div> 202 <div> 203 4</div> 204 <div> 205 5</div> 206 <div> 207 6</div> 208 <div> 209 7</div> 210 <div> 211 8</div> 212 <div> 213 9</div> 214 <div> 215 10</div> 216 <div> 217 11</div> 218 <div> 219 12</div> 220 </div> 221 </div> 222 </body> 223 </html>整個效果與原版相比又打了不小的折扣，而且性能方面是硬傷！！！接下來在想法優化吧！
結語
第一篇想不到寫了這么久，從上午寫到晚上了。。。。。因為在圖片爆炸這一塊研究花了很多時間，最后卻得到一個不怎么滿意的結果！
若是各位大哥對圖片爆炸有什么好的方案的話，請一定說出來喲！
到后面時候，都有點累了就有點亂了，比如圖片flash處右下角的分頁按鈕可以做優化，標簽優化到只有一個，這里也沒有關注了。
最后我提供階段性下載地址吧，希望各位與我一起研究：
文件下載：
http://files.cnblogs.com/yexiaochai/html5css3.zip
有什么問題請各位討論，初次做這種東西有點水，請各位見諒。
最后如果你覺得這篇文章還不錯，請幫忙點擊一下推薦，謝謝！
?
總結
以上是生活随笔為你收集整理的【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第一课 前言 学PHP就是为了做网站
- 下一篇： Sicily 1694. Spiral