QQ2013大气通栏广告jQuery

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

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

以下是 QQ2013大气通栏广告jQuery 的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!--下面的是IE6,7,8hack的CSS文件-->
<!--[if lt IE 9]><link rel="stylesheet" href="css/style-sml.css" /><![endif]-->
<!--[if gte IE 9]><link rel="stylesheet" href="css/style-big2.css" /><![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    if ($.browser.msie) { //IE浏览器
    }
    else{
		$("head").append('<link rel="stylesheet" href="css/style-big.css" />');
    }
});
</script>
<script type="text/javascript" src="js/jqScroll.js"></script>
<script type="text/javascript" src="js/jquery.fullscreenBackground.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		$("#background-image").fullscreenBackground();
	});
</script>
<title>QQ2013大气通栏广告jQuery</title>
</head>

<body>
	<div id="background-image" class="show-1">
		<div class="bannerHover" style="background:#568fd6;display:blcok;"><img src="images/bg-1.jpg" class="banner" width="1582" height="1110" id="b1" rel="1"/></div>
		<div class="bannerHover" style="background:#7777bf;display:none;"><img src="images/bg-2.jpg" class="banner" width="1582" height="1110" id="b2" rel="2"/></div>
		<div class="bannerHover" style="background:#fff2d5;display:none;"><img src="images/bg-3.jpg" class="banner" width="1582" height="1110" id="b3" rel="3"/></div>
		<div class="bannerHover" style="background:#f9faf5;display:none;"><img src="images/bg-4.jpg" class="banner" width="1582" height="1110" id="b4" rel="4"/></div>
		<div class="bannerHover" style="background:#150f3b;display:none;"><img src="images/bg-5.jpg" class="banner" width="1582" height="1110" id="b5" rel="5"/></div>
		<div class="header">
			<a href="#" class="logo pngFix"  title="QQ2013"></a>
			<div class="topNav">
				<a href="#/"  title="IM官网首页">IM官网首页</a>
				|
				<a href="#/"  title="走近QQ客户端团队">走近QQ客户端团队</a>
				|
				<a href="#"  title="QQ官方博客">QQ官方博客</a>
				|
				<a href="#"  title="QQ官方微博">QQ官方微博</a>
				|
				<a href="#"  title="申请QQ帐号">申请QQ帐号</a>
			</div>
		</div>
		<div class="bannerMid">
			<div class="bannerTool">
				<div class="textBanner pngFix"></div>
				<div class="toolBottom">
					<div class="txtLogo"></div>
					<p class="toolInfo">56.2M | 更新日期 2013/07/26</p>
					<p class="roundIcon"><a href="intro.shtml"  class="link" title="功能动画展示">功能动画展示</a></p>
					<a href="#" class="downBtn"  title="立即下载" onclick="tcssClick && tcssClick('downQQ')">立即下载</a>
				</div>
			</div>
		</div>
		<div class="navList">
			<ul class="nav clearfix">
				<li class="n1 pngFix"><a href="javascript:void(0)" class="js_bannerHover" title="数据线" onclick="jQuery.scrollTo('#m1',1000);">数据线<span></span></a></li>
				<li class="n2 pngFix"><a href="javascript:void(0)" class="js_bannerHover" title="传文件" onclick="jQuery.scrollTo('#m2',1000);">传文件<span></span></a></li>
				<li class="n3 pngFix"><a href="javascript:void(0)" class="js_bannerHover" title="讨论组" onclick="jQuery.scrollTo('#m3',1000);">讨论组<span></span></a></li>
				<li class="n4 pngFix"><a href="javascript:void(0)" class="js_bannerHover" title="性能" onclick="jQuery.scrollTo('#m4',1000);">性能<span></span></a></li>
				<li class="n5 pngFix"><a href="javascript:void(0)" class="js_bannerHover" title="视频" onclick="jQuery.scrollTo('#m5',1000);">视频<span></span></a></li>
				<li class="n6 pngFix"><a href="javascript:void(0)" title="联系我们" onclick="jQuery.scrollTo('#letter',1000);tcssClick && tcssClick('ContactUs')">联系我们<span></span></a></li>
			</ul>
		</div>
	</div>
	<div class="grayBg"><div class="line-2"></div></div>
	<div class="contentWrap">
		<div class="mod mod_01" id="m1">
			<div class="modInner clearfix autoM">
				<div class="modPic"></div>
				<div class="modInfo">
					<h2 class="modTitle">QQ数据线实现“无线”传输</h2>
					<p>丢掉传统数据线，在电脑QQ“我的终端”处，可将文件传到手机。<br/>
					手机QQ也可使用QQ数据线功能将文件发送到电脑QQ。</p>
				</div>
			</div>
		</div>
		<div class="mod line mod_02" id="m2">
			<div class="modInner clearfix autoM">
				<div class="modPic"></div>
				<div class="modInfo">
					<h2 class="modTitle">传文件管理方便 一目了然</h2>
					<p>支持预览，无需下载即可在离线文件列表中直接查看离线文件。<br/>
						文件管理器，帮你梳理历史传输的文件，分类清晰，管理方便。</p>
				</div>
			</div>
		</div>
		<div class="mod line mod_03" id="m3">
			<div class="modInner clearfix autoM">
				<div class="modPic"></div>
				<div class="modInfo">
					<h2 class="modTitle">讨论组聊天欢聚更精彩</h2>
					<p>讨论组可传文件，点击发送文件按钮或者将文件拖入输入框即可快速分享！<br/>
					讨论组电脑QQ和手机QQ信息互通，语音、文字、图片顺畅接收，体验流畅。</p>
				</div>
			</div>
		</div>
		<div class="mod line mod_04" id="m4">
			<div class="modInner clearfix autoM">
				<div class="modPic"></div>
				<div class="modInfo">
					<h2 class="modTitle">性能及稳定性提升</h2>
					<p>通过对基础架构和框架的改造，对关键功能的深度优化，不断提升QQ性能与稳定性。</p>
				</div>
			</div>
		</div>
		<div class="mod line mod_05" id="m5">
			<div class="modInner clearfix autoM">
				<div class="modPic"></div>
				<div class="modInfo">
					<h2 class="modTitle">群视频画质清晰玩法丰富</h2>
					<p>QQ群视频全面改版，分辨率再次提升，给你清晰流畅视频画面。<br/>
						视频、语音、文字、表情，让群视频聊天生动活泼！<br/>
						群主和管理员管理群有新招，让你玩得舒心。</p>
				</div>
			</div>
		</div>
	</div>
	<div class="moreWrap" id="contact">
		<div class="moreInner">
			<div class="peopleArea">
				<div class="peopleShow pngFix">
					<a href="javascript:void(0)" class="peopleShow-1"><span></span></a>
					<a href="javascript:void(0)" class="peopleShow-2"><span></span></a>
					<a href="javascript:void(0)" class="peopleShow-3"><span></span></a>
					<a href="javascript:void(0)" class="peopleShow-4"><span></span></a>
					<a href="javascript:void(0)" class="peopleShow-5"><span></span></a>
					<a href="javascript:void(0)" class="peopleShow-6"><span></span></a>
					<a href="javascript:void(0)" class="peopleShow-7"><span></span></a>
					<a href="javascript:void(0)" class="peopleShow-8"><span></span></a>
				</div>
				<div class="peopleTxt">以上仅QQ产品团队部分成员^_^</div>
			</div>
			<div class="letter pngFix" id="letter">
				<a href="#" class="share-1 pngFix"  onclick="tcssClick && tcssClick('shareTXWB')" title="分享到微博赢取明信片">分享到微博赢取明信片</a>
				<a href="#" class="share-2 pngFix"  onclick="tcssClick && tcssClick('shareQQHY')"  title="告诉你最关心的人">告诉你最关心的人</a>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="footerInner">

		</div>
	</div>
	<div class="gotopArea" onclick="jQuery.scrollTo('#background-image',1000);"><a href="javascript:void(0)" class="gotop pngFix" title="回到顶部"></a></div>
	<div class="whiteBg"></div>
</body>
<script type="text/javascript" src="js/nohost.js"></script>
<script type="text/javascript" src="js/tcss.ping.js"></script>
<script type="text/javascript">
    setTimeout(function () {
        if (typeof(pgvMain) == 'function')pgvMain();
    }, 4000);
    function tcssClick(hottag) {
        if (pgvSendClick) pgvSendClick({hottag: 'IMQQ.QQ.2013.NEW.' + hottag});
        return false;
    }
</script>
<script type="text/javascript">
$(function(){
	var banner = $("#background-image .bannerHover");
	var bannerHover = $(".nav .js_bannerHover");
	var length = banner.length;
	var sw = 1;
	bannerHover.mouseover(function(){
		sw = bannerHover.index(this);
		myShow(sw);
	});
	function myShow(i){
		bannerHover.eq(i).addClass("cur").siblings(".js_bannerHover").removeClass("cur");
		banner.eq(i).stop(true,true).fadeIn(500).siblings(".bannerHover").fadeOut(500);
		$("#background-image").removeClass();
		$("#background-image").addClass('show-'+(i+1));
	}
	//滑入停止动画，滑出开始动画
	$(".nav").hover(function(){
		if(myTime){
		   clearInterval(myTime);
		}
	},function(){
		myTime = setInterval(function(){
		myShow(sw)
		sw++;
		if(sw==length){sw=0;}
		} , 4000);
	});
	//自动开始
	var myTime = setInterval(function(){
		myShow(sw);
		sw++;
		if(sw==length){sw=0;}
	} , 4000);
})
	var bh=$(document.body).height();
	$(".whiteBg").css("height",bh);
	$(".whiteBg").fadeOut(500);
</script>
<script type="text/javascript">
	//以下是回到顶部出现的判断
    $(window).scroll(function() {
    	var scrollTop = $(document).scrollTop(); 
    	if(scrollTop>800){
    		$(".gotopArea").show();
    	}
    	else{
    		$(".gotopArea").hide();
    	}
    });
</script>
<!--[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG.js"></script><![endif]-->

</html>

JS代码(jqScroll.js):

(function( $ ){
	var $scrollTo = $.scrollTo = function( target,duration,settings ){
	$(window).scrollTo( target,duration,settings );
}
;
	$scrollTo.defaults ={
	axis:'y',duration:1}
;
	$scrollTo.window = function( scope ){
	return $(window).scrollable();
}
;
	$.fn.scrollable = function(){
	return this.map(function(){
	var win = this.parentWindow || this.defaultView,elem = this.nodeName == '#document' ? win.frameElement || win:this,doc = elem.contentDocument || (elem.contentWindow || elem).document,isWin = elem.setInterval;
	return elem.nodeName == 'IFRAME' || isWin && $.browser.safari ? doc.body:isWin ? doc.documentElement:this;
}
);
}
;
	$.fn.scrollTo = function( target,duration,settings ){
	if( typeof duration == 'object' ){
	settings = duration;
	duration = 0;
}
if( typeof settings == 'function' ) settings ={
	onAfter:settings}
;
	settings = $.extend({
}
,$scrollTo.defaults,settings );
	duration = duration || settings.speed || settings.duration;
	settings.queue = settings.queue && settings.axis.length > 1;
	if( settings.queue ) duration /= 2;
	settings.offset = both( settings.offset );
	settings.over = both( settings.over );
	return this.scrollable().each(function(){
	var elem = this,$elem = $(elem),targ = target,toff,attr ={
}
,win = $elem.is('html,body');
	switch( typeof targ ){
	case 'number':case 'string':if( /^([+-]=)?\d+(px)?$/.test(targ) ){
	targ = both( targ );
	break;
}
targ = $(targ,this);
	case 'object':if( targ.is || targ.style ) toff = (targ = $(targ)).offset();
}
$.each( settings.axis.split(''),function( i,axis ){
	var Pos = axis == 'x' ? 'Left':'Top',pos = Pos.toLowerCase(),key = 'scroll' + Pos,old = elem[key],Dim = axis == 'x' ? 'Width':'Height',dim = Dim.toLowerCase();
	if( toff ){
	attr[key] = toff[pos] + ( win ? 0:old - $elem.offset()[pos] );
	if( settings.margin ){
	attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
	attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
}
attr[key] += settings.offset[pos] || 0;
	if( settings.over[pos] ) attr[key] += targ[dim]() * settings.over[pos];
}
else attr[key] = targ[pos];
	if( /^\d+$/.test(attr[key]) ) attr[key] = attr[key] <= 0 ? 0:Math.min( attr[key],max(Dim) );
	if( !i && settings.queue ){
	if( old != attr[key] ) animate( settings.onAfterFirst );
	delete attr[key];
}
}
);
	animate( settings.onAfter );
	function animate( callback ){
	$elem.animate( attr,duration,settings.easing,callback && function(){
	callback.call(this,target,settings);
}
);
}
;
	function max( Dim ){
	var attr ='scroll'+Dim,doc = elem.ownerDocument;
	return win ? Math.max( doc.documentElement[attr],doc.body[attr] ):elem[attr];
}
;
}
).end();
}
;
	function both( val ){
	return typeof val == 'object' ? val:{
	top:val,left:val}
;
}
;
}
)( jQuery );

JS代码(nohost.js):

void (function (){
	setTimeout(function (){
	var _sname = 'nohost_guid';
	var _src = '/nohost_htdocs/js/SwitchHost.js';
	if (nohostGetCookie(_sname) != ''){
	nohostHttpGet(_src,null,function (result){
	if (!result.ec){
	try{
	eval(result);
}
catch (ex){
	//whatever}
var _init = window['SwitchHost'] && window['SwitchHost'].init;
	_init && _init();
}
}
,'string');
}
}
,1500);
	function nohostHttpGet(url,para,cb,type){
	var params = [];
	for (var i in para){
	params.push(i + "=" + para[i]);
}
if (url.indexOf("?") == -1){
	url += "?";
}
url += params.join('&');
	return nohostHttpAjax(url,null,cb,"GET",type);
}
function nohostHttpAjax(url,para,cb,method,type){
	var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest();
	xhr.open(method,url);
	xhr.onreadystatechange = function (){
	if (xhr.readyState == 4){
	//ie error with 1223 and opera with 304 or 0 if (( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 304 || xhr.status === 1223 || xhr.status === 0){
	if (typeof(type) == "undefined" && xhr.responseText){
	cb(eval("(" + xhr.responseText + ")"));
	//���ݴ���Ա����Ų�json����}
else{
	cb(xhr.responseText);
}
}
else{
	cb({
	ec:+xhr.status}
);
	//5XX�����û�з��ص�����´����}
xhr = null;
}
}
;
	xhr.send(para);
}
function nohostGetCookie(n){
	var m = document.cookie.match(new RegExp("(^| )" + n + "=([^;
	]*)(;
	|$)"));
	return !m ? "":decodeURIComponent(m[2]);
}
function nohostAddEvent(node,eventType,fn){
	if (node.addEventListener){
	node.addEventListener(eventType,fn,false);
}
else if (node.attachEvent){
	node.attachEvent('on' + eventType,fn);
}
else{
	node['on' + eventType] = fn;
}
}
}
)();

CSS代码(style-sml.css):

@charset "UTF-8";/*此CSS用sass编译而来的，如有需要，请务必修改.scss，不要直接修改.CSS。*/
/*Name:QQ2013 1.95 cssAuthor:michelouUpdate time:2013-7-10*/
/*css reset*/
html,body{color:#000;height:100%;*height:auto;_height:100%;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,th,var,i,s{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
input[type=search]{-webkit-appearance:none;}
input[type=checkbox]{vertical-align:middle;margin-top:-1px;}
a img,a span,a strong,a s{#cursor:hand;}
body,button,select,textarea,input{font-family:Microsoft YaHei,Tahoma,SimSun,Verdana;font-size:12px;line-height:1.5;}
body{word-wrap:break-word;}
button{white-space:nowrap;overflow:visible;}
a{text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{text-decoration:none;}
a:active{outline:none;}
a:focus{-moz-outline-style:none;}
div[contenteditable=true]{-webkit-line-break:after-white-space;-webkit-nbsp-mode:space;-webkit-user-modify:read-write;word-wrap:break-word;}
.clearfix:before,.clearfix:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0;}
.clearfix:after{clear:both;}
.hide{display:none!important;}
.l{float:left;}
.r{float:right;}
.lh24{line-height:24px;}
/*滚动条*/
::-webkit-scrollbar{height:11px;width:10px;background-color:#fff;}
::-webkit-scrollbar-button{height:0;width:0;}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment{display:block;}
::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement{display:none;}
::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal,::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal{border-style:solid;border-color:transparent;}
::-webkit-scrollbar-track:vertical::-webkit-scrollbar-track:horizontal{background-clip:padding-box;background-color:#fff;}
::-webkit-scrollbar-thumb{padding-top:100px;-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.1),inset -1px -1px 0 rgba(0,0,0,0.07);background-clip:padding-box;background-color:#dadada;min-height:28px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.25);background-color:rgba(0,0,0,0.4);}
::-webkit-scrollbar-thumb:active{-webkit-box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35);background-color:rgba(0,0,0,0.5);}
::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal{border-width:0;}
::-webkit-scrollbar-track:hover{-webkit-box-shadow:inset 0 0 0 rgba(0,0,0,0);background-color:rgba(0,0,0,0);}
::-webkit-scrollbar-track:active{-webkit-box-shadow:inset 0 0 0 rgba(0,0,0,0),inset -1px -1px 0 rgba(0,0,0,0);background-color:rgba(0,0,0,0);}
/*通用*/
.logo{width:178px;height:45px;display:block;background:url(http://im-img.qq.com/qq/2013/img/logo.png) no-repeat;overflow:hidden;}
.line-2{height:18px;background:url(http://im-img.qq.com/qq/2013/img/line_02.jpg) no-repeat top center;overflow:hidden;}
.roundIcon{padding-left:24px;background:url(http://im-img.qq.com/qq/2013/img/roundIcon.png) no-repeat left center;_background:url(http://im-img.qq.com/qq/2013/img/roundIcon-IE6.png) no-repeat left center;}
.link:hover{text-decoration:underline;}
.grayBg{min-width:1349px;_width:expression((documentElement.clientWidth<1349)?'1349px':'auto');background:url(http://im-img.qq.com/qq/2013/img/normalBg.jpg) repeat;}
.txtLogo{width:214px;height:59px;display:block;overflow:hidden;background:url(http://im-img.qq.com/qq/2013/img/QQ2013.png) no-repeat;_background:url(http://im-img.qq.com/qq/2013/img/QQ2013-IE6.png) no-repeat;overflow:hidden;}
.gotop{width:62px;height:63px;display:block;background:url(http://im-img.qq.com/qq/2013/img/gotop.png) no-repeat;overflow:hidden;}
.gotop:hover{background-position:0 -64px;}
/*全屏*/
#background-image{min-width:1349px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1349?'1349px':'auto');}
#background-image .navList{position:absolute;bottom:-1px;left:0;}
#background-image .bannerHover{position:absolute;left:0;top:0;width:100%;height:100%;display:block;}
#background-image .bannerTool{position:absolute;z-index:1;}
#background-image .bannerMid{position:relative;margin:0 auto;width:100%;max-width:1582px;_width:expression((documentElement.clientWidth>1582)?'1582px':'auto');display:block;}
/*全屏的文案*/
.toolBottom{position:absolute;bottom:0px;line-height:24px;font-size:14px;color:#fff;}
.toolBottom .txtLogo{margin-bottom:14px;}
.bannerTool{width:623px;height:603x;}
.bannerTool .toolBottom{left:137px;}
.downBtn{margin-top:10px;width:268px;height:85px;display:block;background:url(http://im-img.qq.com/qq/2013/img/downBtn.png) no-repeat 0 -332px;overflow:hidden;text-indent:-9999px;font-size:0;line-height:0;overflow:hidden;}
.downBtn:hover{background-position:0 -246px;}
.textBanner{width:430px;height:288px;display:block;overflow:hidden;text-indent:-9999px;font-size:0;line-height:0;overflow:hidden;}
.show-1 .textBanner{background:url(http://im-img.qq.com/qq/2013/img/wenan-1-mid.png?t=20130730) no-repeat;}
.show-2 .textBanner{background:url(http://im-img.qq.com/qq/2013/img/wenan-2-mid.png?t=20130730) no-repeat;}
.show-3 .textBanner{background:url(http://im-img.qq.com/qq/2013/img/wenan-3-mid.png?t=20130730) no-repeat;}
.show-4 .textBanner{background:url(http://im-img.qq.com/qq/2013/img/wenan-4-mid.png?t=20130730) no-repeat;}
.show-5 .textBanner{background:url(http://im-img.qq.com/qq/2013/img/wenan-5-mid.png?t=20130730) no-repeat;}
#background-image .bannerTool{top:70px;right:0;}
/*头部*/
.header{position:absolute;top:10px;left:0;width:100%;height:42px;*zoom:1;}
.header .topNav{position:absolute;right:10px;top:50%;margin-top:-9px;}
.header .logo{position:absolute;left:10px;top:50%;margin-top:-21px;}
.topNav a{color:#fff;}
.topNav a:hover{color:#00b0f0;text-decoration:underline;}
.navList{width:100%;height:89px;display:block;background:url(http://im-img.qq.com/qq/2013/img/nav-bg.png) repeat-x;}
.navList .nav{margin:0 auto;}
.nav{width:100%;max-width:1582px;_width:expression((documentElement.clientWidth < 1582)?'1582px':'auto');height:89px;display:block;overflow:hidden;}
.nav li{float:left;height:100%;background:url(http://im-img.qq.com/qq/2013/img/nav-bg-line.png) no-repeat right center;overflow:hidden;}
.nav li.n1{width:16%;}
.nav li.n1 span{margin-left:-32px;width:64px;background-position:0 0;}
.nav li.n1 a:hover span{background-position:0 -63px;}
.nav li.n2{width:16%;}
.nav li.n2 span{margin-left:-32px;width:64px;background-position:-65px 0;}
.nav li.n2 a:hover span{background-position:-65px -63px;}
.nav li.n3{width:16%;}
.nav li.n3 span{margin-left:-32px;width:65px;background-position:-130px 0;}
.nav li.n3 a:hover span{background-position:-130px -63px;}
.nav li.n4{width:17%;}
.nav li.n4 span{margin-left:-21px;width:43px;background-position:-196px 0;}
.nav li.n4 a:hover span{background-position:-196px -63px;}
.nav li.n5{width:17%;}
.nav li.n5 span{margin-left:-33px;width:65px;background-position:-240px 0;}
.nav li.n5 a:hover span{background-position:-240px -63px;}
.nav li.n6{width:17.9%;background-image:none;}
.nav li.n6 span{margin-left:-43px;width:86px;background-position:-306px 0;}
.nav li.n6 a:hover span{background-position:-306px -63px;}
.nav a{position:relative;width:100%;height:100%;display:block;overflow:hidden;text-indent:-9999px;font-size:0;line-height:0;overflow:hidden;background:url(http://im-img.qq.com/qq/2013/img/nav-bg-hover.png) no-repeat -99999px -99999px;}
.nav a:hover{background-position:center center;}
.nav a span{position:absolute;top:50%;left:50%;margin-top:-31px;height:62px;background:url(http://im-img.qq.com/qq/2013/img/nav-wenzi.png?t=20130731) no-repeat;_background:url(http://im-img.qq.com/qq/2013/img/nav-wenzi-IE6.png?t=20130731) no-repeat;}
.show-1 .nav .n1 a{background-position:center center;}
.show-1 .nav .n1 a span{background-position:0 -63px;}
.show-1 .logo{background-position:0 0;}
.show-1 .topNav,.show-1 .toolBottom{color:#fff;}
.show-1 .topNav a,.show-1 .toolBottom a{color:#fff;}
.show-1 .txtLogo{background-position:0 -60px;}
.show-2 .nav .n2 a{background-position:center center;}
.show-2 .nav .n2 a span{background-position:-65px -63px;}
.show-2 .logo{background-position:0 0;}
.show-2 .topNav,.show-2 .toolBottom{color:#fff;}
.show-2 .topNav a,.show-2 .toolBottom a{color:#fff;}
.show-2 .txtLogo{background-position:0 -60px;}
.show-3 .nav .n3 a{background-position:center center;}
.show-3 .nav .n3 a span{background-position:-130px -63px;}
.show-3 .logo{background-position:0 -45px;}
.show-3 .topNav,.show-3 .toolBottom{color:#000;}
.show-3 .topNav a,.show-3 .toolBottom a{color:#000;}
.show-3 .topNav .roundIcon,.show-3 .toolBottom .roundIcon{background:url(http://im-img.qq.com/qq/2013/img/roundIconBlack.png) no-repeat left center;_background:url(http://im-img.qq.com/qq/2013/img/roundIconBlack-IE6.png) no-repeat left center;}
.show-3 .txtLogo{background-position:0 0;}
.show-4 .nav .n4 a{background-position:center center;}
.show-4 .nav .n4 a span{background-position:-196px -63px;}
.show-4 .logo{background-position:0 -45px;}
.show-4 .topNav,.show-4 .toolBottom{color:#000;}
.show-4 .topNav a,.show-4 .toolBottom a{color:#000;}
.show-4 .topNav .roundIcon,.show-4 .toolBottom .roundIcon{background:url(http://im-img.qq.com/qq/2013/img/roundIconBlack.png) no-repeat left center;_background:url(http://im-img.qq.com/qq/2013/img/roundIconBlack-IE6.png) no-repeat left center;}
.show-4 .txtLogo{background-position:0 0;}
.show-5 .nav .n5 a{background-position:center center;}
.show-5 .nav .n5 a span{background-position:-240px -63px;}
.show-5 .logo{background-position:0 0;}
.show-5 .topNav,.show-5 .toolBottom{color:#fff;}
.show-5 .topNav a,.show-5 .toolBottom a{color:#fff;}
.show-5 .txtLogo{background-position:0 -60px;}
/*内容模块*/
.contentWrap{min-width:1349px;_width:expression((documentElement.clientWidth < 1349)?'1349px':'auto');background:url(http://im-img.qq.com/qq/2013/img/normalBg.jpg) repeat left top;}
.line{background:url(http://im-img.qq.com/qq/2013/img/line.jpg) no-repeat center top;}
.mod .modInner{position:relative;}
.modInfo{line-height:28px;color:#7f7f7f;font-size:16px;}
.modInfo .modTitle{margin-bottom:27px;color:#575656;line-height:36px;font-size:36px;}
.modInfo .modLink{color:#00b0f0;}
.modInfo .modLink:hover{text-decoration:underline;}
.autoM{margin:0 auto;width:970px;}
.mod{min-width:970px;_width:expression((documentElement.clientWidth < 970)?'970px':'auto');}
.mod .modInfo{position:absolute;width:480px;}
.mod .modInfo .modTitle{line-height:48px;}
.mod .modPic{position:absolute;}
.mod_01{padding-top:40px;}
.mod_01 .modInner{height:297px;}
.mod_01 .modInfo{top:56px;left:0;}
.mod_01 .modPic{bottom:0;right:-20px;width:595px;height:279px;background:url(http://im-img.qq.com/qq/2013/img/mod_01.jpg) no-repeat;}
.mod_02 .modInner{height:342px;}
.mod_02 .modInfo{top:111px;right:0;}
.mod_02 .modPic{top:40px;left:0;width:432px;height:282px;background:url(http://im-img.qq.com/qq/2013/img/mod_02.jpg) no-repeat;}
.mod_03 .modInner{height:342px;}
.mod_03 .modInfo{top:86px;left:0;}
.mod_03 .modPic{top:74px;right:-64px;width:628px;height:268px;background:url(http://im-img.qq.com/qq/2013/img/mod_03.jpg) no-repeat;}
.mod_04 .modInner{height:341px;}
.mod_04 .modInfo{top:100px;right:0;}
.mod_04 .modPic{top:8px;left:0;width:432px;height:321px;background:url(http://im-img.qq.com/qq/2013/img/mod_04.jpg) no-repeat;}
.mod_05 .modInner{height:342px;}
.mod_05 .modInfo{top:80px;left:0;}
.mod_05 .modPic{top:34px;right:0;width:424px;height:290px;background:url(http://im-img.qq.com/qq/2013/img/mod_05.jpg?20130730) no-repeat;}
/*我们期望与你更近*/
.moreWrap{position:relative;width:100%;background:url(http://im-img.qq.com/qq/2013/img/bigBlueBg.jpg) repeat center center;}
.moreWrap{min-width:1349px;_width:expression((documentElement.clientWidth < 1349)?'1349px':'auto');height:963px;}
.moreInner{position:relative;margin:0 auto;width:1230px;height:963px;}
.moreInner .peopleArea{position:absolute;top:178px;right:0;}
.moreInner .letter{position:absolute;left:0;top:90px;}
.peopleArea{position:relative;}
.peopleArea .peopleTxt{position:absolute;bottom:-10px;right:0;padding:6px 10px;background-color:#7eb2da;color:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.3);box-shadow:0px 1px 3px rgba(0,0,0,0.3);}
.peopleShow{position:relative;width:676px;height:696px;display:block;background:url(http://im-img.qq.com/qq/2013/img/people.png) no-repeat;}
.peopleShow a{position:absolute;display:block;}
.peopleShow a span{position:absolute;width:150px;height:121px;display:none;background:url(http://im-img.qq.com/qq/2013/img/peopleName.png?t=20130731) no-repeat;_background:url(http://im-img.qq.com/qq/2013/img/peopleName-IE6.png?t=20130731) no-repeat;overflow:hidden;}
.peopleShow a:hover span{display:block;}
.peopleShow .peopleShow-1{width:136px;height:212px;top:287px;left:268px;}
.peopleShow .peopleShow-1 span{top:-46px;left:94px;background-position:0 0;}
.peopleShow .peopleShow-2{width:136px;height:212px;top:144px;left:498px;}
.peopleShow .peopleShow-2 span{top:0;left:94px;background-position:0 -122px;}
.peopleShow .peopleShow-3{width:108px;height:212px;top:260px;left:402px;}
.peopleShow .peopleShow-3 span{top:-25px;left:93px;background-position:0 -244px;}
.peopleShow .peopleShow-4{width:87px;height:123px;top:144px;left:282px;}
.peopleShow .peopleShow-4 span{top:-43px;left:78px;background-position:0 -366px;}
.peopleShow .peopleShow-5{width:99px;height:120px;top:130px;left:372px;}
.peopleShow .peopleShow-5 span{top:0;left:59px;background-position:0 -488px;}
.peopleShow .peopleShow-6{width:93px;height:149px;top:160px;left:187px;}
.peopleShow .peopleShow-6 span{top:-29px;left:84px;background-position:0 -610px;}
.peopleShow .peopleShow-7{width:136px;height:212px;top:295px;left:115px;}
.peopleShow .peopleShow-7 span{top:0;left:114px;background-position:0 -732px;}
.peopleShow .peopleShow-8{width:104px;height:200px;top:142px;left:75px;}
.peopleShow .peopleShow-8 span{top:0;left:91px;background-position:0 -854px;}
.letter{position:relative;width:457px;height:778px;display:block;background:url(http://im-img.qq.com/qq/2013/img/letter.png) no-repeat;overflow:hidden;}
.letter a{position:absolute;right:-2px;width:224px;height:47px;display:block;background:url(http://im-img.qq.com/qq/2013/img/shareBtn.png) no-repeat;overflow:hidden;text-indent:-9999px;font-size:0;line-height:0;overflow:hidden;}
.letter .share-1{top:632px;background-position:0 0;}
.letter .share-1:hover{background-position:0 -48px;}
.letter .share-2{top:691px;background-position:0 -96px;}
.letter .share-2:hover{background-position:0 -144px;}
/*footer*/
.footer{min-width:1349px;_width:expression((documentElement.clientWidth<1349)?'1349px':'auto');line-height:24px;background:url(http://im-img.qq.com/qq/2013/img/blueBg.jpg) repeat top left;color:#fff;text-align:center;}
.footer .footerInner{background:url(http://im-img.qq.com/qq/2013/img/line_03.jpg) no-repeat top center;}
.footer .footerInner p{padding:28px 0 0 0;height:68px;}
/*遮罩*/
.whiteBg{position:absolute;top:0;left:0;z-index:99;width:100%;height:100%;display:block;background-color:#fff;}
/*回到顶部*/
.gotopArea{position:fixed;bottom:100px;right:20px;z-index:99;_position:absolute;_bottom:auto;_right:expression(eval(document.documentElement.scrollRight+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginRight,10)||0)-(parseInt(this.currentStyle.marginLeft,10)||100));_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||400)-(parseInt(this.currentStyle.marginBottom,10)||0) + 300));display:none;}

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