拷貝出騰訊微博關于奧運會的拉繩開關特效

作者：夏天的森林 2012-08-09 14:28:33

我在國外的網站里還是發現了一個我感興趣的特效，就是騰訊微博里的"拉繩開關"的換膚效果，這個比較簡單，我把代碼“摳 ”了出來。

奧運會正在進行中，各大網站都因為這盛會有所改版或者是拿出了自己的新的頁面特效。其中最牛叉的還是谷歌，如下圖：

[[90061]]

可以用鍵盤控制的小游戲，看看它的源碼：

<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

原文鏈接：http://www.cnblogs.com/sharpxiajun/archive/2012/08/07/2626531.html

【編輯推薦】

如何優化你的JS代碼
另一款有意思的JS圖片放大鏡
大部分人沒用過的JS頁面模板化
能說明你的JS技術很爛的五個原因
為何轉向Spine.js的十個理由

責任編輯：張偉來源：夏天的森林的博客

JavaScript