基于jQuery实现QQ2013通栏广告



35 139 47



特效描述:基于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>



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


热门标签: 图片叠加 图片层叠 图片全屏 图片淡出淡进 图片淡出 图片淡进 图片延迟加载 图片延迟 图片加载 图片翻转 图片旋转 图片放大镜 头像上传 图片上传 图片拖动 图片拖拽 二维码 带缩略图的幻灯片 图片广告 h5图片动画 h5图标动画 html5图片动画 html5图标动画 地图 中国地图 世界地图 滚动切换 滚动条切换 滑动选项卡 滑动切换 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 图片滚动 图片滚动条 纯图片轮播 图片轮播 图片收缩展开 图片收缩 图片展开 图片滑动 图片滑块 图片切换 图片选项卡 图标选项卡 自动滚动图片轮播 图标导航 图标菜单 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 背景切换 大图切换 滑动手风琴 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 浮动提示框 图表 图片 图片插件 头像截图 图片广告 图片切换 图片选项卡 图标选项卡 背景切换 大图切换 选项卡自动切换 图片切换 切换图片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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