基于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 href="http://www.w2bc.com/" 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 href="http://www.w2bc.com/" 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 href="http://www.w2bc.com/" 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 href="http://www.w2bc.com/" 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>

via：http://www.w2bc.com/Article/36320