[科技]基于jQuery實現的騰訊互動娛樂網站特效

　　分享一款基于jQuery實現的騰訊互動娛樂網站特效。騰訊互動娛樂網站jQuery特效是一款右側帶伸縮選項卡，支持鼠標滾輪滾動切換特效代碼。效果圖如下：

　　實現的代碼。

　　html代碼：

  <div id="fullPage" class="show-a">
        <div id="sideNav" class="side-nav side-nav-0">
            <ul class="side-nav-ul">
                <li class="side-nav-item side-nav-item-cur"><a href="javascript:;" hidefocus="ture">
                    <i class="s-icon s-icon-home">&#xe600;</i>首頁</a></li>
                <li class="side-nav-item"><a href="javascript:;" hidefocus="ture"><i class="s-icon s-icon-game">
                    &#xe601;</i>游戲</a></li>
                <li class="side-nav-item"><a href="javascript:;" hidefocus="ture"><i class="s-icon s-icon-literature">
                    &#xe602;</i>文學</a></li>
                <li class="side-nav-item"><a href="javascript:;" hidefocus="ture"><i class="s-icon s-icon-comic">
                    &#xe603;</i>動漫</a></li>
                <li class="side-nav-item"><a href="javascript:;" hidefocus="ture"><i class="s-icon s-icon-film">
                    &#xe604;</i>影視&amp;戲劇</a></li>
                <li class="side-nav-item"><a href="javascript:;" hidefocus="ture"><i class="s-icon s-icon-copyright">
                    &#xe605;</i>版權&amp;授權</a></li>
            </ul>
        </div>
        <div id="scroller">
            <div class="section screen" id="a">
                <div class="layer bg bg-a" data-z="10">
                </div>
                <div class="ani-wrap">
                    <span class="layer z5 sj-4 fadeInDown-3" data-z="9"></span><span class="layer z4 sj-3 fadeInDown-4"
                        data-z="8"></span>
                    <!-- slogon拆分 -->
                    <span class="layer z6 slogon-1" data-z="1"><span class="slogon-1-in fadeInScale-1"></span>
                    </span><span class="layer z6 slogon-2" data-z="1"><span class="slogon-2-in fadeInScale-2">
                    </span></span><span class="layer z6 slogon-3" data-z="1"><span class="slogon-3-in fadeInScale-3">
                    </span></span><span class="layer z6 slogon-4" data-z="1"><span class="slogon-4-in fadeInScale-4">
                    </span></span><span class="layer z6 slogon-5" data-z="1"><span class="slogon-5-in fadeInScale-5">
                    </span></span>
                    <div class="hide">
                        <h2 class="hide">
                            讓想象綻放</h2>
                        <p class="hide">
                            WE CREATE HAPPINESS</p>
                    </div>
                    <span class="layer z2 sj-2 fadeInDown-1" data-z="6"></span><span class="layer z1 sj-1 fadeInDown-2"
                        data-z="8"></span>
                </div>
                <div class="info-wrap">
                    <div class="col adq1">
                        <a class="adq-pic" href="news-20140416-l.html">
                            <img src="web201404/adq-1.png" alt=""></a> <a class="adq-label" href="news-20140416-l.html">
                                <span class="adq-title">騰訊文學管理層首度亮相</span> <span class="adq-summary">騰訊文學管理層首度亮相 吳文輝出任CEO</span>
                            </a>
                    </div>
                    <div class="col adq2">
                        <a class="adq-pic" href="news-20140416-m.html">
                            <img src="web201404/adq-2.jpg" alt=""></a> <a class="adq-label" href="news-20140416-m.html"
                                id="headline">
                                <h3 class="title">
                                    騰訊互娛UP發布會</h3>
                                <p class="summary">
                                    適用瀏覽器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下瀏覽器。</p>
                            </a>
                    </div>
                    <div class="news">
                        <div class="news-data">
                            <table cellspacing="0" class="news-table">
                                <tbody>
                                    <tr>
                                        <td class="news-point">
                                            <span class="point">.</span>
                                        </td>
                                        <td class="news-title">
                                            來源：<a  target="_blank">站長素材</a>
                                        </td>
                                        <td class="news-date">
                                            09.22
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="news-point">
                                            <span class="point">.</span>
                                        </td>
                                        <td class="news-title">
                                            <a href="news-20140805-n1.html">[公開課]探秘游戲方法論接受報名</a>
                                        </td>
                                        <td class="news-date">
                                            08.05
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="news-point">
                                            <span class="point">.</span>
                                        </td>
                                        <td class="news-title">
                                            <a href="news-20140805-n2.html">“國漫神話”《尸兄》宣布手游授權 業內首個全產業IP誕生</a>
                                        </td>
                                        <td class="news-date">
                                            08.05
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <a class="news-more" href="news.html">更多</a>
                    </div>
                </div>
            </div>
            <div class="section screen" id="b">
                <h3 class="hide">
                    騰訊游戲</h3>
                <span class="layer z10 lx-3" data-z="9"></span><span class="layer z10 lx-2" data-z="1">
                </span><span class="layer z10 lx-1" data-z="6"></span>
                <img class="layer z1 b-title" data-z="2" src="web201404/title-b.png" width="288"
                    height="111" alt="騰訊游戲">
                <p class="layer z1 s-desc" data-z="5">
                    全球排名第三的游戲開發和運營機構，也是國內最大的網絡游戲社區。 騰訊游戲以“用心創造快樂”為理念，通過在多個游戲產品細分領域的耕耘，致力為玩家提供“值得信賴的”、“快樂的”和“專業的”互動游戲體驗。<span
                        class="s-link"><a  target="_blank">www.w2bc.com &gt;</a></span></p>
                <span class="layer z9 role-dzs" data-z="10"></span><span class="layer z8 mask-1"
                    data-z="9"></span><span class="layer z7 role-x5" data-z="8"></span><span class="layer z5 role-lol"
                        data-z="6"></span><span class="layer z4 role-cf" data-z="8"></span><span class="layer z3 mask-2"
                            data-z="5"></span><span class="layer z3 role-kp" data-z="2"></span>
            </div>
            <div class="section screen" id="c">
                <h3 class="hide">
                    騰訊文學</h3>
                <div class="layer bg bg-c" data-z="9">
                </div>
                <img class="layer z8 dbx" data-z="9" src="web201404/c-dbx.png" width="16.15789473684211%"
                    height="auto" class="閱讀服務體驗">
                <div id="iPad" class="layer obj z9" data-z="5" data-w="1024" data-h="788">
                    <img id="iPadFrame" src="web201404/ipad.png" width="100%" height="100%" alt="文學平臺">
                    <div id="books">
                        <div id="booksTurn">
                            <img class="page z1" src="web201404/ipad-cover.png" width="100%" height="100%" alt="騰訊文學">
                            <img class="page z2" src="web201404/ipad-page1.png" width="100%" height="100%" alt="暢銷圖書">
                        </div>
                    </div>
                </div>
                <img class="layer z1 c-title" data-z="2" src="web201404/title-c.png" width="401"
                    height="112" alt="文學 Literature">
                <p class="layer z1 s-desc" data-z="5">
                    中國極具規模和影響力的文學平臺，目前已實現移動互聯網和互聯網閱讀的互聯互通。騰訊閱讀以“一生閱讀伙伴”為理念，依托互動娛樂的泛娛樂資源為行業人士提供全文學產業鏈的商業變現機會，同時為廣大讀者創造全文學各細分領域一體化閱讀服務體驗。<span
                        class="s-link"><a  target="_blank">book.qq.com &gt;</a></span></p>
            </div>
            <div class="section screen" id="d">
                <h3 class="hide">
                    騰訊動漫</h3>
                <div class="layer bg z-8 bg-d" data-z="9">
                </div>
                <img class="layer z8 dbx" data-z="9" src="web201404/d-dbx.png" width="" height="auto"
                    alt="騰訊動漫">
                <!-- hand -->
                <img class="layer obj z1 cartoon-hand" data-z="1" src="web201404/hand.png" width="1000"
                    height="800" alt="火影忍者">
                <div id="renwu" class="layer obj z-8" data-z="8" data-w="860" data-h="840">
                    <span class="rw-1 z7">
                        <img src="web201404/renwu/cartoon-1.png" width="100%" height="100%"></span>
                    <span class="rw-2 z6">
                        <img src="web201404/renwu/cartoon-2.png" width="100%" height="100%"></span>
                    <span class="rw-3 z5">
                        <img src="web201404/renwu/cartoon-3.png" width="100%" height="100%"></span>
                    <span class="rw-4 z4">
                        <img src="web201404/renwu/cartoon-4.png" width="100%" height="100%"></span>
                </div>
                <img class="layer z2 d-title" data-z="2" src="web201404/title-d.png" alt="動漫 animation &amp; comic"
                    width="546" height="112">
                <p class="layer z1 s-desc" data-z="2">
                    騰訊動漫平臺于2012年3月21日正式成立，成為騰訊互動娛樂推出的首個泛娛樂實體平臺。作為中國目前最具規模和活力的正版動漫發行平臺，騰訊動漫平臺以版權為核心，以培育原創為特色，積極促進中國動漫更好地與新平臺、新技術融合，引領產業變革。<span
                        class="s-link"><a  target="_blank">ac.qq.com &gt;</a></span></p>
                <img class="layer z3 light light-1" data-z="3" src="web201404/light-1.png" width="211"
                    height="252" alt="騰訊互動娛樂">
                <img class="layer z3 light light-2" data-z="3" src="web201404/light-2.png" width="210"
                    height="161" alt="泛娛樂">
                <img class="layer z3 light light-3" data-z="3" src="web201404/light-3.png" width="354"
                    height="200" alt="騰訊游戲">
                <img class="layer z3 light light-4" data-z="3" src="web201404/light-4.png" width="269"
                    height="160" alt="騰訊文學">
                <img class="layer z3 light light-5" data-z="3" src="web201404/light-5.png" width="214"
                    height="107" alt="騰訊動漫">
                <img class="layer z3 light light-6" data-z="3" src="web201404/light-6.png" width="310"
                    height="153" alt="騰訊泛娛樂">
                <img class="layer z3 light light-7" data-z="3" src="web201404/light-7.png" width="469"
                    height="165" alt="互動娛樂品牌">
                <img class="layer z3 light light-8" data-z="3" src="web201404/light-8.png" width="209"
                    height="164" alt="粉絲經濟">
            </div>
            <div class="section screen" id="e">
                <h3 class="hide">
                    影視&amp;戲劇</h3>
                <div class="layer bg z-11 bg-e" data-z="9">
                </div>
                <img class="layer z8 dbx" data-z="9" src="web201404/e-dbx.png" width="307" height="165">
                <img class="layer obj z8 ys-1" data-z="6" src="web201404/roles/ys-1.png" width="630"
                    height="735" alt="泛娛樂">
                <img class="layer obj z8 ys-2" data-z="4" src="web201404/roles/ys-2.png" width="888"
                    height="1046" alt="品牌文化">
                <img class="layer obj z8 ys-3" data-z="3" src="web201404/roles/ys-3.png" width="170"
                    height="161" alt="影視產業">
                <img class="layer obj z8 ys-4" data-z="1" src="web201404/roles/ys-4.png" width="298"
                    height="405" alt="戲劇產業">
                <img class="layer z2 e-title" data-z="2" src="web201404/title-e.png" alt="動漫 animation &amp; comic"
                    width="564" height="112">
                <p class="layer z1 s-desc" data-z="5">
                    以“品牌”、“文化”、“內容”多維度交互為目標，在文化產業融合中積極探索，嘗試與影視產業、戲劇產業跨界聯姻，通過與一流電影人、戲劇制作人攜手合作，促進電影、戲劇與游戲的跨界藝術融合，為騰訊互動娛樂用戶創造更加豐富的文化內涵和用戶體驗，為社會貢獻優質的互動娛樂內容和服務。<span
                        class="s-link"><a href="film.html">查看詳情 &gt;</a></span></p>
            </div>
            <div class="section screen" id="f">
                <h3 class="hide">
                    版權&amp;授權</h3>
                <img class="layer z5 obj flx-1" data-z="5" src="svg/f-lx.svg" width="108" height="108"
                    alt="品牌授權">
                <img class="layer z5 obj flx-2" data-z="5" src="svg/f-lx.svg" width="108" height="108"
                    alt="知識產權">
                <img class="layer z9 obj cp-1" data-z="6" src="web201404/roles/cp-1.png" width="1860"
                    height="1080" alt="IP（知識產權）">
                <img class="layer z8 obj cp-2" data-z="3" src="web201404/roles/cp-2.png" width="1860"
                    height="1080" alt="品牌授權">
                <img class="layer z8 obj cp-3" data-z="1" src="web201404/roles/cp-3.png" width="1860"
                    height="1080" alt="互動娛樂體驗">
                <img class="layer z2 f-title" data-z="2" src="web201404/title-f.png" width="594"
                    height="107" alt="動漫 animation &amp; comic">
                <p class="layer z1 s-desc" data-z="5">
                    品牌授權是騰訊互動娛樂業務泛娛樂戰略的重要一環，主要通過IP（知識產權）授權的衍生產出物，為玩家提供多元化互動娛樂體驗，培養游戲品牌文化，挖掘更豐富的品牌商業價值。騰訊互動娛樂旨在與優質的傳統企業一起，探索多元化跨行業的多贏商業模式，打造騰訊互動娛樂旗下業務與品牌授權的產業鏈。<span
                        class="s-link"><a href="cooperation.html">查看詳情 &gt;</a></span></p>
            </div>
            <div class="place-hold">
            </div>
        </div>
        <span class="layer z1 arrow-down" data-z="2" title="向下滾動查看更多"></span><span class="layer z1 arrow-up"
            data-z="2" title="向上滾動查看更多"></span>
    </div>