武林網(www.49028c.com)文章簡介：這個頁面用到了html5的標簽元素和css3的線性漸變、圓角、陰影效果，以及當前流行的parallax視差特效和一些其他結合jquery的動畫，在chrome,Safari,opera,firefox下都可以完美顯示，如果你還使用IE瀏覽器，我想效果支持的并不是那么完美，不過盡管這樣，我還是對IE6,7,8
這個頁面用到了html5的標簽元素和css3的線性漸變、圓角、陰影效果，以及當前流行的parallax視差特效和一些其他結合jquery的動畫，在chrome,Safari,opera,firefox下都可以完美顯示，如果你還使用IE瀏覽器，我想效果支持的并不是那么完美，不過盡管這樣，我還是對IE6,7,8做了兼容性處理。
View Demo ,
Download
下面我們就來一步一步的實現這個頁面，首先你要準備好設計師設計的PSD文件，并進行精確的切圖，我們先來看這個comingsoon頁面有哪些文件：
一個index.htm文件
css：
reset.css（格式化樣式表）
style.css （網站主要樣式表文件）
js：
jquery.jparallax.js支持該頁面的視差效果的插件，需要與jquery1.2.6相配套使用，如需更多了解請前往 。
jquery.backgroundpos.js jquery的一個背景位置轉換插件，用來支持該頁面社會分享圖標的動畫效果。
CheckBrowser.js判斷瀏覽器版本以及客戶端設備的文件，用來調試兼容性。
Html5Act-Install.js 加載或啟動動畫的基礎的js文件
image文件夾：包含所有的圖片
字體：
我們的設計師設計了手繪字體，為了能讓沒有安裝該字體的用戶看到，我們引入了谷歌的字體庫并在CSS樣式中調用了它。
<link href=’?family=Francois+One|McLaren|Rye|Dancing+Script’ rel=’stylesheet’ type=’text/css’>
頭部
我們使用了html5標簽<header></header>,對于不支持html5標簽的IE瀏覽器，我們這里通過調用谷歌的html5.js使其支持html5的標簽，另外需要在CSS中聲明這些元素塊狀顯示，reset.css文件里面已經聲明。在index.htm文件<head></head>部分你可以看到這部分代碼：
<!–IE fix for HTML5 tags–>
< !–[if lt IE 9]>
< script src=””>
< /script>
< ![endif]–>
我們來看代碼部分：
<header><img src=”image/logo.png” //Png transparent background in ie6var ua = checkB();if (ua["isIE6"]) {$("img,#left-box,#star,#brand,#sharebox,#sharebox ul li,#sharebox ul li a").addClass("png_bg");}
新聞熱點
疑難解答
