javascript笔记：拷贝出腾讯微博关于London2012奥运会的拉绳开关的网页特效

　　奥运会正在进行中，各大网站都因为这盛会有所改版或者是拿出了自己的新的页面特效。其中最牛叉的还是谷歌，如下图：

　　可以用键盘控制的小游戏，看看它的源码：

<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>

下载链接：

https://files.cnblogs.com/sharpxiajun/myQQ.zip

posted @ 2012-08-07 13:13 夏天的森林阅读(2552) 评论(5) 编辑收藏举报

刷新页面返回顶部

夏天的森林

好记性不如烂笔头

javascript笔记：拷贝出腾讯微博关于London2012奥运会的拉绳开关的网页特效

公告