QQ浏览器mac版页面jQuery特效
阅读：1530
时间：2018-02-01 03:26
分享一款基于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
闽ICP备12017094号-3