QQ浏览器mac版页面jQuery特效

分享一款基于QQ浏览器mac版页面jQuery特效。这是一款jQuery+CSS3实现的仿QQ浏览器mac版官网主页特效代码。效果图如下:

在线预览   源码下载

实现的代码:

    <h1 style="display: none">
        QQ浏览器for Mac</h1>
    <h2 style="display: none">
        高速浏览器;书签同步浏览器;高速下载浏览器</h2>
    <ul id="bg">
        <div id="bg4">
        </div>
        <div id="bg3">
        </div>
        <div id="bg2">
        </div>
        <div id="bg1">
        </div>
        <div id="bg0">
        </div>
    </ul>
    <div id="stagelow" style="display: none">
        <div id="low_bg">
            <div id="low_main">
                <div id="low_title">
                    <img src="images/newlogo.png" width="372px" />
                    <a id="btn" style="width: 130px; margin-left: -30px; border: 1px solid #fff;" data-download-btn="true"
                        href="#" onclick="pgvSendClick({hottag:'browser_mac.downloader_low'});">立即下载</a>
                    <span class="btnadditional" style="left: 570px; text-align: left; top: 11px;">正式版<br>
                        支持OS X 10.7+</span>
                </div>
                <img src="images/page1_low.png" />
            </div>
        </div>
        <div id="low_panel">
            <img src="images/low_slide1.png" alt="高速浏览器" title="高速浏览器" />
            <img src="images/low_slide2.png" alt="书签同步浏览器" title="书签同步浏览器" />
            <img src="images/low_slide3.png" alt="高速下载浏览器" title="高速下载浏览器"><br>
            <span>? <span class="year"></span>Tencent</span> <span class="global-links-1" style="margin-left: 440px">
                <a href="#">2.0 版官网</a> <span class="vsplitline">|</span> <a href="#">历史版本下载</a>
                <span class="vsplitline">|</span> <a href="#">PC 版</a> <span class="vsplitline">|</span>
                <a href="h#">论坛</a> <span class="vsplitline">|</span> <a href="#" rel="nofollow">微博</a>
            </span>
        </div>
    </div>
    <div id="stage">
        <div id="page1" class="status2" style="display: none">
            <div class="glow">
                <img src="images/page1_glow.png" />
            </div>
            <div class="main">
                <ul>
                    <li>
                        <img src="images/page2_main_1.png" /></li>
                    <li>
                        <img src="images/page2_main_2.png" /></li>
                    <li>
                        <img src="images/page2_main_3.png" /></li>
                    <li>
                        <img src="images/page2_main_4.png" /></li>
                </ul>
            </div>
            <div id="track" class="page0">
                <div id="line1">
                    <img src="images/lineglow.png" /></div>
            </div>
            <div class="title">
                <span>
                    <img src="images/page1_title.png" /></span> <span style="font-size: 13px; margin-top: 10px;">
                        支持Chromium V40 稳定版<br>
                        Mac平台独家支持网址云安全检测</span>
            </div>
        </div>
        <div id="page2" class="status2" style="display: none;">
            <div class="glow">
                <img src="images/page2_glow.png" />
            </div>
            <div class="glowlogo">
                <img src="images/page2_glowlogo.png" />
            </div>
            <div class="main">
                <ul>
                    <li><span>
                        <img class="round" src="images/ttround.png" />
                    </span></li>
                    <li><span>
                        <img class="round" src="images/ttround.png" />
                    </span></li>
                    <li><span>
                        <img class="round" src="images/ttround.png" />
                    </span></li>
                </ul>
                <div class="title">
                    <span></span><span>
                        <img src="images/page2_title.png" />
                    </span>
                </div>
            </div>
        </div>
        <div id="page3" class="status2" style="display: none;">
            <div class="glow">
                <img src="images/page3_glow.png" />
            </div>
            <div class="highway">
                <div class="tr">
                    <div class="line">
                        <img src="images/lineglow.png" /></div>
                    <div class="line">
                        <img src="images/lineglow.png" /></div>
                </div>
                <div class="tr">
                    <div class="line">
                        <img src="images/lineglow.png" /></div>
                    <div class="line">
                        <img src="images/lineglow.png" /></div>
                </div>
            </div>
            <div class="main">
                <ul>
                    <li>
                        <img src="images/page4_main_storm.png" /></li>
                    <li>
                        <img src="images/page4_main_sheild.png" /></li>
                    <li>
                        <img src="images/page4_main_clock.png" /></li>
                    <li>
                        <img src="images/page4_main_clockout.png" /></li>
                    <li>
                        <img src="images/page4_main_xf.png" /></li>
                    <div class="title">
                        <span>
                            <img src="images/page3_title1.png" /></span> <span>
                                <img src="images/page3_title1.png" /></span> <span>
                                    <img src="images/page3_tag.png" /><br>
                                    BT / eMule / 旋风文件一站式下载</span>
                    </div>
                </ul>
            </div>
        </div>
        <div id="page4" class="status2" style="display: none;">
            <div class="glow">
                <img src="images/page4_glow.png" />
            </div>
            <div class="main">
                <ul>
                    <li>
                        <img src="images/bubble.png" />
                        <img src="images/page4_icon_2.png" />
                    </li>
                    <li>
                        <img src="images/bubble_glow.png" />
                        <img src="images/page4_icon_1.png" />
                    </li>
                    <li>
                        <img src="images/bubble.png" />
                        <img src="images/page4_icon_3.png" />
                    </li>
                    <li>
                        <img src="images/bubble.png" />
                        <img src="images/page4_icon_5.png" />
                    </li>
                    <li>
                        <img src="images/bubble.png" />
                        <img src="images/page4_icon_6.png" />
                    </li>
                    <li>
                        <img src="images/bubble.png" />
                        <img src="images/page4_icon_4.png" />
                    </li>
                </ul>
            </div>
            <div class="title">
                <span>
                    <img src="images/page4_title.png" /></span> <span>双击关闭、超级拖拽、广告过滤<br />
                        恢复按钮、网银插件、截图</span>
            </div>
        </div>
        <div id="page0" class="status2" style="display: none;">
            <div class="main">
                <img id="page0_glow" src="images/page0_glow.png">
                <ul>
                    <li></li>
                    <li></li>
                    <li>
                        <img width="577px" height="359px" src="images/better_title.png" /></li>
                    <li>
                        <img width="577px" height="359px" src="images/better.png" /></li>
                    <li>
                        <img src="images/page1_main_1new.png" /></li>
                    <li>
                        <img src="images/page1_main_2new.png" /></li>
                    <li>
                        <img src="images/page1_main_4.png" /></li>
                    <li></li>
                    <div>
                        <img class="page0_round" src="images/ttround.png"></div>
                </ul>
                <div id="hero">
                    <div id="page0_logo">
                        <img src="images/newlogo.png" width="372px" /></div>
                    <a style="width: 120px; margin-left: -30px" id="btn" data-download-btn="true" href="#"
                        onclick="pgvSendClick({hottag:'browser_mac.downloader_common'});">立即下载</a> <span
                            class="btnadditional" style="left: 520px!important; top: 9px">正式版<br>
                            支持OS X 10.7+</span>
                </div>
            </div>
        </div>
    </div>
    <ul id="navigation">
        <li class="page_on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="global_logo">
        <img src="images/0_logo.png">
    </div>
    <div class="global_btn">
        <a data-download-btn="true" href="#" onclick="pgvSendClick({hottag:'browser_mac.downloader_corner'});">
            <img src="images/0_btn.png"></a>
    </div>
    <div id="global_scroll">
        <img src="images/scroll.png">
    </div>
    <span class="global_copyright">? <span class="year"></span>Tencent</span> <span class="global_links">
        <a href="#">2.0 版官网</a> <span class="vsplitline">|</span> <a href="#">历史版本下载</a>
        <span class="vsplitline">|</span> <a href="#">PC 版</a> <span class="vsplitline">|</span>
        <a href="#">论坛</a> <span class="vsplitline">|</span> <a href="#" rel="nofollow">微博</a>
    </span>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="js/common.js?v=2014022801"></script>
    <script type="text/javascript" src="js/tcss.ping.js"></script>
    <script type="text/javascript" id="test"></script>
    <script type="text/javascript">
        if (typeof (pgvMain) == 'function') {
            pgvMain("pathtrace", { pathStart: true, tagParamName: "ADTAG", useRefUrl: true, override: true, careSameDomainRef: false });
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            isSupportUA();
            MotionEventRegister();
            motion(0);

        });
        var d = new Date()
        $('.year').text(d.getFullYear())
    </script>

via:http://www.w2bc.com/Article/32704

在线预览    源码下载

爱编程-编程爱好者经验分享平台
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3