基于jQuery实现QQ2013通栏广告



75 297 100



特效描述:基于jQuery实现 QQ2013 通栏广告,基于jQuery实现QQ2013通栏广告

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style-sml.css" />
<link rel="stylesheet" href="css/style-big2.css" />
<link rel="stylesheet" href="css/style-big.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jqScroll.js"></script>
<script type="text/javascript" src="js/jquery.fullscreenBackground.js"></script>
<script type="text/javascript" src="js/nohost.js"></script>
<script type="text/javascript" src="js/tcss.ping.js"></script>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>

3. HTML代码

	<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" target="_blank" title="QQ2013"></a>
			<div class="topNav">
				<a href="http://51qianduan.com/" target="_blank" title="IM官网首页">IM官网首页</a>
				|
				<a href="http://51qianduan.com/" target="_blank" title="走近QQ客户端团队">走近QQ客户端团队</a>
				|
				<a href="http://51qianduan.com" target="_blank" title="QQ官方博客">QQ官方博客</a>
				|
				<a href="http://51qianduan.com" target="_blank" title="QQ官方微博">QQ官方微博</a>
				|
				<a href="http://51qianduan.com" target="_blank" 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" target="_blank" class="link" title="功能动画展示">功能动画展示</a></p>
					<a href="http://51qianduan.com" class="downBtn" target="_blank" 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="http://51qianduan.com" class="share-1 pngFix" target="_blank" onclick="tcssClick && tcssClick('shareTXWB')" title="分享到微博赢取明信片">分享到微博赢取明信片</a>
				<a href="http://51qianduan.com" class="share-2 pngFix" target="_blank" onclick="tcssClick && tcssClick('shareQQHY')"  title="告诉你最关心的人">告诉你最关心的人</a>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="footerInner">
<div style="text-align:center;clear:both">
</div>
		</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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 导航切换 图片广告 对联广告 图片切换 文字切换 叠加浮动层 背景切换 手风琴 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动切换 滑动选项卡切换 悬浮浮动漂浮 选项卡切换 滑动手风琴 浮动提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到