QQ浏览器mac版页面jQuery特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 QQ浏览器mac版页面jQuery特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>QQ浏览器mac版页面jQuery特效</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" />
	<link rel="stylesheet" type="text/css" href="css/motion.css" media="all" />
    <link type="text/css" media="screen" rel="stylesheet" href="css/awwwards.css" />
	<style>
	#verson-alert{
		border-bottom: 1px solid rgba(255,255,255,.2)!important;
		color:white!important;
		padding-bottom:12px!important;
		font-size:12px!important;
	}
	#verson-alert a{
		color:#33a6fa!important;
	}
	</style>
</head>
<body>
<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>
</body>
</html>

JS代码(common.js):

var pn = 0;
	var d = 1;
	window.touchEvent = false;
	$('#page0').removeClass('status2');
	$('#page0').addClass('status1');
	$(".btnadditional").fadeOut(0);
	function isSupportUA(){
	function uatrue(){
	$('#stagelow').remove();
}
function uafalse(){
	$('#stagelow').css('display','block');
	$('#stage,#bg,#navigation,#global_scroll,.global_logo,.global_btn,.global_copyright,.global_links').remove();
	$('body').css('overflow','auto');
}
var ua,tempstr,temparr;
	var ua = navigator.userAgent.toUpperCase();
	if (ua.indexOf("SAFARI") != -1 && ua.indexOf("CHROME/") <= -1){
	uatrue();
}
else if (ua.indexOf('CHROME/') != -1){
	if (ua.indexOf('LBBROWSER') != -1){
	uafalse();
	return;
}
if ((ua.indexOf('QQBROWSER') != -1) && (ua.indexOf('WINDOW') != -1)){
	uafalse();
	return;
}
tempstr = parseInt(ua.split('CHROME/')[1].split(' ')[0],10);
	if (tempstr > 28){
	// $('#stagelow').css('display','none');
	// $('#stage').css('display','block');
	uatrue();
}
else{
	uafalse();
}
}
else{
	uafalse();
}
}
function MotionEventRegister(){
	$(window).resize(function(){
	$('body').css('width',$(window).width()+'px').css('height',$(window).height()+'px');
}
);
	$('#page0').removeClass('status2').addClass('status1');
	$(window).mousewheel(function(event,delta,deltaX,deltaY){
	status = $('body').attr('class');
	if (status != 'playing'){
	if(deltaY<0){
	motion(1);
	$('#navigation li').removeClass('page_on');
	$('#navigation li:nth-of-type('+(pn+1)+')').addClass('page_on');
}
else{
	motion(-1);
	$('#navigation li').removeClass('page_on');
	$('#navigation li:nth-of-type('+(pn+1)+')').addClass('page_on');
}
$('body').addClass('playing');
	setTimeout(function(){
	$('body').removeClass('playing')}
,1300);
}
}
);
	document.onkeydown = function(event){
	var c = window.event.keyCode;
	if (c==40||c==32||c==39){
	motion(1);
	$('#navigation li').removeClass('page_on');
	$('#navigation li:nth-of-type('+pn+')').addClass('page_on');
}
else if (c==38||c==37){
	motion(-1);
	$('#navigation li').removeClass('page_on');
	$('#navigation li:nth-of-type('+pn+')').addClass('page_on');
}
}
$("#btn").mouseover(function(){
	$(".btnadditional").fadeIn(300);
}
);
	$("#btn").mouseout(function(){
	$(".btnadditional").fadeOut(300);
}
);
}
function motion(d){
	pn = pn + d;
	if (pn == 0){
	$('.global_logo').css('opacity','0');
	$('.global_btn').css('opacity','0');
	$('#global_scroll').css('opacity','1');
	$('.page0_round').css('display','block');
}
else{
	$('.global_logo').css('opacity','1');
	$('.global_btn').css('opacity','1');
	$('#global_scroll').css('opacity','0');
	$('.page0_round').css('display','none');
}
;
	if (pn==-1){
	pn = 0;
}
else if (pn==5){
	$('#page4').removeClass('status1').addClass('status0');
	$('#page0').css({
	'display':'block','opacity':'0'}
);
	setTimeout(function(){
	$('#page0').css('opacity','1').removeClass('status0').addClass('status1');
}
,100);
	pn = 0;
	motion(0);
	$('.global_logo').css('opacity','0');
	$('.global_btn').css('opacity','0');
	$('#global_scroll').css('opacity','1');
}
if (d==1){
	$('#bg'+(pn-1)).css('opacity','0');
	$('#bg'+(pn)).css('opacity','1');
}
else if (d==0){
	$('#bg div').css('opacity','0');
	$('#bg'+(pn)).css('opacity','1');
}
else{
	$('#bg'+(pn+1)).css('opacity','0');
	$('#bg'+(pn)).css('opacity','1');
}
;
	$('#track').removeClass('page0').removeClass('page1').removeClass('page2').removeClass('page3').removeClass('page4');
	$('#track').addClass('page'+pn);
	$('#pn').text(pn);
	$('#page'+pn).removeClass('status2').removeClass('status0');
	$('#page'+pn).addClass('status1');
	$('#page'+(pn-1)).removeClass('slow');
	$('#page'+(pn+1)).removeClass('slow');
	$('#page'+(pn-1)).removeClass('status1');
	$('#page'+(pn-1)).addClass('status0');
	$('#page'+(pn+1)).removeClass('status1');
	$('#page'+(pn+1)).addClass('status2');
	// Energy savervar lens = 3,keys = 1;
	for (var i = 0;
	i < lens;
	i++){
	if (i <= keys){
	$('#page'+(pn+i)).css('display','block');
	$('#page'+(pn-i)).css('display','block');
	$('#bg'+(pn+i)).css('display','block');
	$('#bg'+(pn-i)).css('display','block');
}
else{
	$('#page'+(pn-i)).css('display','none');
	$('#page'+(pn+i)).css('display','none');
	$('#bg'+(pn+i)).css('display','none');
	$('#bg'+(pn-i)).css('display','none');
}
}
}

JS代码(tcss.ping.js):

(function(){
	function tcss(e){
	this.url=[],this.init(e)}
function loadScript(e){
	var t=document.createElement("script"),n=document.getElementsByTagName("script")[0];
	t.src=e,t.type="text/javascript",t.async=!0,n.parentNode.insertBefore(t,n)}
var _d,_l,_b,_n="-",_params,_curDomain,_curUrl,_domainToSet,_refDomain,_refUrl,_image,_ext,_hurlcn,_tt,_ch=0,_crossDomain=0;
	_ver="tcss.3.1.5",_speedTestUrl="http://jsqmt.qq.com/cdn_djl.js",window.Tcss={
}
;
	var _pgvVersion=typeof tracert=="function"&&typeof pgvGetColumn=="function"&&typeof pgvGetTopic=="function"&&typeof pgvGetDomainInfo=="function"&&typeof pgvGetRefInfo=="function";
	if(typeof _rep=="undefined")var _rep=1;
	tcss.prototype={
	init:function(e){
	e?_params=e:_params={
}
,_d=document;
	if(!_params.statIframe&&window!=top)try{
	_d=top.document}
catch(t){
}
typeof _d=="undefined"&&(_d=document),_l=_d.location,_b=_d.body,_pgvVersion&&(Tcss.d=_d,Tcss.l=_l),_ext=[],_hurlcn=[],_tt=[]}
,run:function(){
	var e,t,n;
	e=(new Date).getTime(),_cookie.init(),this.url.push(this.getDomainInfo()),this.coverCookie(),_cookie.setCookie("ssid"),_cookie.save(),this.url.unshift("http://pingfore."+this.getCookieSetDomain(_curDomain)+"/pingd?"),this.url.push(this.getRefInfo(_params));
	try{
	navigator.cookieEnabled?this.url.push("&pvid="+_cookie.setCookie("pgv_pvid",!0)):this.url.push("&pvid=NoCookie")}
catch(r){
	this.url.push("&pvid=NoCookie")}
this.url.push(this.getMainEnvInfo()),this.url.push(this.getExtendEnvInfo()),Tcss.pgUserType="";
	if(_params.pgUserType||_params.reserved2){
	var i=_params.pgUserType||_params.reserved2;
	i=escape(i.substring(0,256)),Tcss.pgUserType=i,_tt.push("pu="+Tcss.pgUserType)}
_pgvVersion&&(pgvGetColumn(),pgvGetTopic(),this.url.push("&column="+Tcss.column+"&subject="+Tcss.subject),tracert()),this.url.push("&vs="+_ver),_cookie.setCookie("ts_uid",!0),t=(new Date).getTime(),_ext.push("tm="+(t-e)),_ch&&_ext.push("ch="+_ch),_params.extParam?n=_params.extParam+"|":n="",this.url.push("&ext="+escape(n+_ext.join(";
	"))),this.url.push("&hurlcn="+escape(_hurlcn.join(";
	"))),this.url.push("&rand="+Math.round(Math.random()*1e5)),typeof _speedMark=="undefined"?this.url.push("&reserved1=-1"):this.url.push("&reserved1="+(new Date-_speedMark));
	var s=this.getSud();
	s&&_tt.push("su="+escape(s.substring(0,256))),this.url.push("&tt="+escape(_tt.join(";
	"))),this.sendInfo(this.url.join(""));
	if(_crossDomain==1){
	var o=this.getParameter("tcss_rp_dm",_d.URL);
	if(o!=Tcss.dm){
	var u=this.url.join("").replace(/\?dm=(.*?)\&/,"?dm="+o+"&");
	this.sendInfo(u)}
}
_params.hot&&(document.attachEvent?document.attachEvent("onclick",function(e){
	pgvWatchClick(e)}
):document.addEventListener("click",function(e){
	pgvWatchClick(e)}
,!1)),_params.repeatApplay&&_params.repeatApplay=="true"&&typeof _rep!="undefined"&&(_rep=1)}
,getSud:function(){
	if(_params.sessionUserType)return _params.sessionUserType;
	var e=_params.sudParamName||"sessionUserType",t=this.getParameter(e,_d.URL);
	return t}
,coverCookie:function(){
	if(_params.crossDomain&&_params.crossDomain=="on"){
	var e=this.getParameter("tcss_uid",_d.URL),t=this.getParameter("tcss_sid",_d.URL),n=this.getParameter("tcss_refer",_d.URL),r=this.getParameter("tcss_last",_d.URL);
	t&&e&&(_crossDomain=1,_cookie.setCookie("ssid",!1,t),_cookie.save(),_cookie.setCookie("ts_refer",!0,n),_cookie.setCookie("ts_last",!0,r),_cookie.setCookie("pgv_pvid",!0,e))}
}
,getDomainInfo:function(e){
	var t,n;
	return t=_l.hostname.toLowerCase(),_params.virtualDomain&&(_hurlcn.push("ad="+t),t=_params.virtualDomain),n=this.getCurrentUrl(),Tcss.dm=t,_pgvVersion&&pgvGetDomainInfo(),_curDomain=Tcss.dm,_domainToSet||(_domainToSet=this.getCookieSetDomain(_l.hostname.toLowerCase()),_pgvVersion&&(Tcss.domainToSet=_domainToSet)),e&&(Tcss.dm+=".hot"),"dm="+Tcss.dm+"&url="+Tcss.url}
,getCurrentUrl:function(){
	var e="",t=_n;
	e=_curUrl=escape(_l.pathname),_l.search!=""&&(t=escape(_l.search.substr(1)));
	if(_params.senseParam){
	var n=this.getParameter(_params.senseParam,_d.URL);
	n&&(e+="_"+n)}
_params.virtualURL&&(_hurlcn.push("au="+e),e=_params.virtualURL),Tcss.url=e,Tcss.arg=t}
,getRefInfo:function(e){
	var t=_n,n=_n,r=_n,i=_d.referrer,s,o,u;
	s=e.tagParamName||"ADTAG",o=this.getParameter(s,_d.URL),u=i.indexOf("://");
	if(u>-1){
	var a=/(\w+):\/\/([^\:|\/]+)(\:\d*)?(.*\/)([^#|\?|\n]+)?(#.*)?(\?.*)?/i,f=i.match(a);
	f&&(t=f[2],n=f[4]+(f[5]?f[5]:""))}
if(i.indexOf("?")!=-1){
	var u=i.indexOf("?")+1;
	r=i.substr(u)}
var l=t;
	_params.virtualRefDomain&&(t!=_n&&_hurlcn.push("ard="+t),t=_params.virtualRefDomain),_params.virtualRefURL&&(n!=_n&&_hurlcn.push("aru="+escape(n)),n=_params.virtualRefURL);
	var c;
	o&&(c=t+n,t="ADTAG",n=o),_refDomain=t,_refUrl=escape(n);
	if(_refDomain==_n||_refDomain=="ADTAG"&&l==_n){
	var h=_cookie.get("ts_last=",!0);
	h!=_n&&_ext.push("ls="+h)}
_cookie.setCookie("ts_last",!0,escape((_l.hostname+_l.pathname).substring(0,128)));
	var p=_cookie.get("ts_refer=",!0);
	p!=_n&&_ext.push("rf="+p);
	var d=_l.hostname;
	_params.inner&&(d=","+d+","+_params.inner+",");
	if(!(_refDomain==_n||(","+d+",").indexOf(_refDomain)>-1||_crossDomain==1)){
	var v=escape((_refDomain+n).substring(0,128));
	v!=p&&(_ch=2),_cookie.setCookie("ts_refer",!0,v)}
return Tcss.rdm=_refDomain,Tcss.rurl=_refUrl,Tcss.rarg=escape(r),_pgvVersion&&pgvGetRefInfo(),c?"&rdm="+Tcss.rdm+"&rurl="+Tcss.rurl+"&rarg="+Tcss.rarg+"&or="+c:"&rdm="+Tcss.rdm+"&rurl="+Tcss.rurl+"&rarg="+Tcss.rarg}
,getMainEnvInfo:function(){
	var e="";
	try{
	var t=_n,n=_n,r=_n,i=_n,s=_n,o=0,u=navigator;
	self.screen&&(t=screen.width+"x"+screen.height,n=screen.colorDepth+"-bit"),u.language?r=u.language.toLowerCase():u.browserLanguage&&(r=u.browserLanguage.toLowerCase()),o=u.javaEnabled()?1:0,i=u.platform,s=(new Date).getTimezoneOffset()/60,e="&scr="+t+"&scl="+n+"&lang="+r+"&java="+o+"&pf="+i+"&tz="+s}
catch(a){
}
finally{
	return e}
}
,getExtendEnvInfo:function(){
	var e="";
	try{
	var t,n=_l.href,r=_n;
	e+="&flash="+this.getFlashInfo(),_b.addBehavior&&(_b.addBehavior("#default#homePage"),_b.isHomePage(n)&&(e+="&hp=Y")),_b.addBehavior&&(_b.addBehavior("#default#clientCaps"),r=_b.connectionType),e+="&ct="+r}
catch(i){
}
finally{
	return e}
}
,getFlashInfo:function(){
	var f=_n,n=navigator;
	try{
	if(n.plugins&&n.plugins.length){
	for(var i=0;
	i<n.plugins.length;
	i++)if(n.plugins[i].name.indexOf("Shockwave Flash")>-1){
	f=n.plugins[i].description.split("Shockwave Flash ")[1];
	break}
}
else if(window.ActiveXObject)for(var i=12;
	i>=5;
	i--)try{
	var fl=eval("new ActiveXObject('ShockwaveFlash.ShockwaveFlash."+i+"');
	");
	if(fl){
	f=i+".0";
	break}
}
catch(e){
}
}
catch(e){
}
return f}
,getParameter:function(e,t){
	if(e&&t){
	var n=new RegExp("(\\?|#|&)"+e+"=([^&^#]*)(#|&|$)"),r=t.match(n);
	return r?r[2]:""}
return""}
,getCookieSetDomain:function(e){
	var t,n,r,i=[],s=0;
	for(var o=0;
	o<e.length;
	o++)e.charAt(o)=="."&&(i[s]=o,s++);
	return t=i.length,n=e.indexOf(".cn"),n>-1&&t--,r="qq.com",t==1?r=e:t>1&&(r=e.substring(i[t-2]+1)),r}
,watchClick:function(e){
	try{
	var t=!0,n="",r;
	r=window.event?window.event.srcElement:e.target;
	switch(r.tagName){
	case"A":n="<A href="+r.href+">"+r.innerHTML+"</a>";
	break;
	case"IMG":n="<IMG src="+r.src+">";
	break;
	case"INPUT":n="<INPUT type="+r.type+" value="+r.value+">";
	break;
	case"BUTTON":n="<BUTTON>"+r.innerText+"</BUTTON>";
	break;
	case"SELECT":n="SELECT";
	break;
	default:t=!1}
if(t){
	var i=new tcss(_params),s=i.getElementPos(r);
	if(_params.coordinateId){
	var o=i.getElementPos(document.getElementById(_params.coordinateId));
	s.x-=o.x}
i.url.push(i.getDomainInfo(!0)),i.url.push("&hottag="+escape(n)),i.url.push("&hotx="+s.x),i.url.push("&hoty="+s.y),i.url.push("&rand="+Math.round(Math.random()*1e5)),i.url.unshift("http://pinghot."+this.getCookieSetDomain(_curDomain)+"/pingd?"),i.sendInfo(i.url.join(""))}
}
catch(u){
}
}
,getElementPos:function(e){
	if(e.parentNode===null||e.style.display=="none")return!1;
	var t=navigator.userAgent.toLowerCase(),n=null,r=[],i;
	if(e.getBoundingClientRect){
	var s,o,u,a;
	return i=e.getBoundingClientRect(),s=Math.max(document.documentElement.scrollTop,document.body.scrollTop),o=Math.max(document.documentElement.scrollLeft,document.body.scrollLeft),u=document.body.clientTop,a=document.body.clientLeft,{
	x:i.left+o-a,y:i.top+s-u}
}
if(document.getBoxObjectFor){
	i=document.getBoxObjectFor(e);
	var f=e.style.borderLeftWidth?Math.floor(e.style.borderLeftWidth):0,l=e.style.borderTopWidth?Math.floor(e.style.borderTopWidth):0;
	r=[i.x-f,i.y-l]}
else{
	r=[e.offsetLeft,e.offsetTop],n=e.offsetParent;
	if(n!=e)while(n)r[0]+=n.offsetLeft,r[1]+=n.offsetTop,n=n.offsetParent;
	if(t.indexOf("opera")>-1||t.indexOf("safari")>-1&&e.style.position=="absolute")r[0]-=document.body.offsetLeft,r[1]-=document.body.offsetTop}
e.parentNode?n=e.parentNode:n=null;
	while(n&&n.tagName!="BODY"&&n.tagName!="HTML")r[0]-=n.scrollLeft,r[1]-=n.scrollTop,n.parentNode?n=n.parentNode:n=null;
	return{
	x:r[0],y:r[1]}
}
,sendClick:function(){
	_params.hottag&&(this.url.push(this.getDomainInfo(!0)),this.url.push("&hottag="+escape(_params.hottag)),this.url.push("&hotx=9999&hoty=9999"),this.url.push("&rand="+Math.round(Math.random()*1e5)),this.url.unshift("http://pinghot."+this.getCookieSetDomain(_curDomain)+"/pingd?"),this.sendInfo(this.url.join("")))}
,pgvGetArgs:function(){
	this.getDomainInfo();
	var e=[];
	return e.push("tcss_rp_dm="+Tcss.dm),e.push("tcss_uid="+_cookie.get("pgv_pvid=",!0)),e.push("tcss_sid="+_cookie.get("ssid=",!0)),e.push("tcss_refer="+_cookie.get("ts_refer=",!0)),e.push("tcss_last="+_cookie.get("ts_last=",!0)),e.join("&")}
,sendInfo:function(e){
	_image=new Image(1,1),Tcss.img=_image,_image.onload=_image.onerror=_image.onabort=function(){
	_image.onload=_image.onerror=_image.onabort=null,Tcss.img=null}
,_image.src=e}
}
;
	var _cookie={
	sck:[],sco:{
}
,init:function(){
	var e=this.get("pgv_info=",!0);
	if(e!=_n){
	var t=e.split("&");
	for(var n=0;
	n<t.length;
	n++){
	var r=t[n].split("=");
	this.set(r[0],unescape(r[1]))}
}
}
,get:function(e,t){
	var n=t?_d.cookie:this.get("pgv_info=",!0),r=_n,i,s;
	i=n.indexOf(e);
	if(i>-1){
	i+=e.length,s=n.indexOf(";
	",i),s==-1&&(s=n.length);
	if(!t){
	var o=n.indexOf("&",i);
	o>-1&&(s=Math.min(s,o))}
r=n.substring(i,s)}
return r}
,set:function(e,t){
	this.sco[e]=t;
	var n=!1,r=this.sck.length;
	for(var i=0;
	i<r;
	i++)if(e==this.sck[i]){
	n=!0;
	break}
n||this.sck.push(e)}
,setCookie:function(e,t,n){
	var r=_l.hostname,i=_cookie.get(e+"=",t);
	if(i==_n&&!n){
	switch(e){
	case"ts_uid":_ext.push("nw=1");
	break;
	case"ssid":_ch=1}
t?i="":i="s";
	var s=(new Date).getUTCMilliseconds();
	i+=Math.round(Math.abs(Math.random()-1)*2147483647)*s%1e10}
else i=n?n:i;
	if(t)switch(e){
	case"ts_uid":this.saveCookie(e+"="+i,r,this.getExpires(1051200));
	break;
	case"ts_refer":this.saveCookie(e+"="+i,r,this.getExpires(259200));
	break;
	case"ts_last":this.saveCookie(e+"="+i,r,this.getExpires(30));
	break;
	default:this.saveCookie(e+"="+i,_domainToSet,"expires=Sun,18 Jan 2038 00:00:00 GMT;
	")}
else this.set(e,i);
	return i}
,getExpires:function(e){
	var t=new Date;
	return t.setTime(t.getTime()+e*60*1e3),"expires="+t.toGMTString()}
,save:function(){
	if(_params.sessionSpan){
	var e=new Date;
	e.setTime(e.getTime()+_params.sessionSpan*60*1e3)}
var t="",n=this.sck.length;
	for(var r=0;
	r<n;
	r++)t+=this.sck[r]+"="+this.sco[this.sck[r]]+"&";
	t="pgv_info="+t.substr(0,t.length-1);
	var i="";
	e&&(i="expires="+e.toGMTString()),this.saveCookie(t,_domainToSet,i)}
,saveCookie:function(e,t,n){
	_d.cookie=e+";
	path=/;
	domain="+t+";
	"+n}
}
;
	window.pgvMain=function(e,t){
	var n="";
	t?(n=t,_ver="tcsso.3.1.5"):(n=e,_ver="tcss.3.1.5");
	try{
	_pgvVersion&&(typeof pvRepeatCount!="undefined"&&pvRepeatCount==1?(_rep=1,pvRepeatCount=2):_rep=2);
	if(_rep!=1)return;
	_rep=2,(new tcss(n)).run()}
catch(r){
}
}
,window.pgvSendClick=function(e){
	(new tcss(e)).sendClick()}
,window.pgvWatchClick=function(e){
	(new tcss(e)).watchClick(e)}
,window.pgvGetArgs=function(e){
	return(new tcss(e)).pgvGetArgs()}
,loadScript(_speedTestUrl)}
)()

CSS代码(reset.css):

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

附件:下载该文件资源,减少时间成本(增值服务)