奧運會正在進行中，各大網站都因為這盛會有所改版或者是拿出了自己的新的頁面特效。其中最牛叉的還是谷歌，如下圖：
可以用鍵盤控制的小游戲，看看它的源碼：
<div id="hplogo" tabindex="0" dir="ltr" aria-label="跨欄" style="cursor: pointer;"> <canvas style="position: absolute;" height="207" width="530"></canvas> .....
canvas，html5....，拷貝它的代碼還是有點難度了。
但是我在國外的網站里還是發現了一個我感興趣的特效，就是騰訊微博里的"拉繩開關"的換膚效果，這個比較簡單，我把代碼“摳 ”了出來。
首先介紹小這個網頁特效的效果，點擊“London 2012”吊環圖標，圖標會下拉繩，釋放鼠標后，頁面背景會換成中國奧運軍團的圖 片，此時吊環下方，會有一個“還原”按鈕，點擊“還原”按鈕，背景恢復到原來背景，繼續點擊拉繩吊環，背景圖片會在不同的 奧運圖片間切換，鼠標移到拉繩上方，鼠標變成剪刀樣式，點擊，吊環會以自由落體的方式墜落，最后消失。
以上效果我都拷貝出來了，還是比較簡單的，源碼如下：
首先還是目錄結構：
main.css的代碼：
body { background-color:#999; color: #333333; font: 12px/1.75 Tahoma,Arial,sans-serif; } body { background:url(../images/wrapbg_v0.0.1.jpg) no-repeat scroll center top #73CFF1; color: #333333; font: 12px/1.75 Tahoma,Arial,sans-serif; height: 100%; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } .nv_toogle_w { height: 0; margin: 0 auto; position: relative; width: 960px; } a, .c_tx { text-decoration: none; } a, .c_tx { color: #006A92; } .nv_toggle_btn, .nv_arrow_wpd, .nv_arrow_lab, .nv_arrow_message { background:url(../images/guide_icon.png) no-repeat scroll 0 0 transparent; } .nv_toggle_btn { background-position: -195px 0; cursor: pointer; display: block; height: 111px; position: absolute; right: -31px; text-indent: -9999px; top: -35px; width: 23px; z-index: 5; } .nv_toggle_btn_oly2012 { background: url("../images/nv_toggle_btn_oly2012.png") no-repeat scroll 0 0 transparent; height: 206px; right: -44px; top: -73px; width: 29px; } .headWrap a { color: #C9C9C9; } .headWrap a:hover { text-decoration: none; } .nv_toggle_btn span { display: block; } .nv_toggle_reset { color: #FECCF3 !important; position: absolute; right: -43px; top: 138px; } .nv_toggle_reset, .nv_toggle_reset span, .nv_toggle_reset b { display: block; height: 26px; width: 27px; } .nv_toggle_reset span { cursor: pointer; line-height: 26px; position: relative; text-align: center; z-index: 5; } .nv_toggle_reset b { background: none repeat scroll 0 0 #E33194; left: 0; opacity: 0.63; position: absolute; top: 0; z-index: 0; } .nv_toggle_cut { cursor: url("http://mat1.gtimg.com/www/mb/images/cut_c.cur"), pointer; display: block; height: 19px; position: absolute; right: -44px; top: 0; width: 29px; z-index: 10; }
main.js的代碼：
var picInd = 0; $(document).ready(function() { $("#nv_toogle_w").bind("mousedown",function(){ $(this).animate({top:"20px"},"normal"); }); $("#nv_toogle_w").bind("mouseup",function(){ getRandomNum(); $("body").attr("class",""); $("body").addClass("body" + picInd); $(this).animate({top:"0px"},"normal"); $("#nv_toogle_w2").css("display","block"); }); $("#nv_toogle_w2").bind("click",function(){ $("body").attr("class",""); $("#nv_toogle_w2").css("display","none"); }); $("#nv_toggle_cut").bind("click",function(){ $("#nv_toogle_w").animate({top:"300px"},"4000"); $("a[boss='btnWideGuideBtn']").animate({opacity:"0"},"3000"); $("#nv_toogle_w2").css("display","none").delay(6999); }); }); function getRandomNum(){ while(true){ var curInd = Math.floor(Math.random() * 8 + 1); if (picInd != 0 || picInd != curInd){ picInd = curInd; break; } } }
qq01.html的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>QQ Study 01</title> </head> <script type="text/javascript" src="js/jquery-1.7.1.js"></script> <script type="text/javascript" src="js/main.js"></script> <link type="text/css" rel="stylesheet" href="css/main.css" /> <style type="text/css"> .body1{ background:url(images/bg/ldyx.jpg) no-repeat fixed center top #EFEFEF; } .body2{ background: url(images/bg/aycg_120802.jpg) no-repeat fixed center top #000000; } .body3{ background: url(images/bg/jqsc.jpg) no-repeat fixed center top #000000; } .body4{ background: url(images/bg/bg2.jpg) no-repeat fixed center top #1D1D1D; } .body5{ background: url(images/bg/bg3.jpg) no-repeat fixed center top #1D1D1D; } .body6{ background: url(images/bg/bg4.jpg) no-repeat fixed center top #1D1D1D; } .body7{ background: url(images/bg/mlld.jpg) no-repeat fixed center top #429FDE; } .body8{ background: url(images/bg/bg.jpg) no-repeat fixed center top #000000; } </style> <body> <div class="nv_head_wrap"> <div title="拉一下換膚" style="top: 0px;" id="nv_toogle_w" class="nv_toogle_w"> <a boss="btnWideGuideBtn" class="nv_toggle_btn nv_toggle_btn_oly2012" href="#"> <span> new </span> </a> </div> <div style="position:relative" class="nv_toogle_w"> <a id="nv_toogle_w2" style="display: none;" class="nv_toggle_reset" href="#"> <span> 還原 </span> <b> </b> </a> <a id="nv_toggle_cut" class="nv_toggle_cut" title="永久關閉此功能" href="#"> </a> </div> <div> </div> </div> </body> </html>
下載鏈接：
http://files.cnblogs.com/sharpxiajun/myQQ.zip