QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jQuery仿腾讯云产品列表滚动tab切换代码

原创商用 jQuery仿腾讯云产品列表滚动tab切换代码

jQuery制作腾讯云产品定价tab标签滚动切换产品列表代码。这款选项卡tab支持多个文字标签可以隐藏滚动切换效果。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/style.css"/>

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="container">
	<div class="price">
		<h2>产品定价</h2>
		<div class="category">
			<ul>
				<li class="active">热门</li>
				<li>计算</li>
				<li>存储</li>
				<li>视频服务</li>
				<li>数据库</li>
				<li>网络</li>
				<li>CDN与加速</li>
				<li>互联网中间件</li>
				<li>域名服务</li>
				<li>游戏服务</li>
				<li>通信服务</li>
				<li>安全</li>
				<li>人工智能</li>
				<li>语音服务</li>
				<li>移动服务</li>
				<li>数据处理</li>
				<li>应用服务</li>
			</ul>
			<a href="javascript:;" class="prev"><span></span></a>
			<a href="javascript:;" class="next"><span></span></a>
		</div>
		<div class="cont active">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云数据库 MySQL</h3>
							<p class="desc">一体化多维度监控,高效管理海量数据库</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">对象存储 COS</h3>
							<p class="desc">可靠、安全、易用的可扩展文件存储</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">内容分发网络 CDN</h3>
							<p class="desc">多借点全网覆盖、安全稳定的内容加速服务</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">BGP高防</h3>
							<p class="desc">高达300G的防护服务和多达21线的BGP线路抵御DDoS攻击</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云解析</h3>
							<p class="desc">向全网域名提供稳定、安全、快速的智能解析服务</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">万象优图</h3>
							<p class="desc">高效图片处理、全面的图片鉴定和识别服务</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">直播</h3>
							<p class="desc">专业稳定快速的直播接入和分发服务</p>
						</div>
					</a>
				</li>						
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		
	</div>
</div>

<script type="text/javascript">
	$(function(){
		//选项卡切换
		$('.category ul li').click(function(){
			indexC = $(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			$('.cont').eq(indexC).addClass('active').siblings().removeClass('active');
		})
		//按钮箭头
		var catew = $('.category').width()-150;
		var cateLiw = 0;
		$('.category ul li').each(function(){
			cateLiw +=$(this).outerWidth();
		})
		var i =0;
		$('.next').click(function(){
			$('.category ul').animate({
				"margin-left":-catew+'px'
			},500)
			i++;
			if((catew+150)*i+(catew+150)>=cateLiw){
				$('.prev').show();
				$('.next').hide();
			}
		})
		$('.prev').click(function(){
			$('.category ul').animate({
				"margin-left":0+'px'
			},500)
			$(this).hide();$('.next').show();
		})
	})
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
9彩注册 www.350538.com-彩色铅笔画-| www.071067.com-深圳招聘足彩分析师| www.220366.com-大奖彩票网官方网站| www.310632.com-云南省福彩-| www.420265.com-莆田体育彩票装修| www.590775.com-中国彩礼地图| www.755273.com-彩客旧版客户端下载| www.230147.com-大发快三骗局输钱| www.923283.com-竞彩亚盘技巧| www.669116.com-外国人如何买彩票| www.277009.com-天津快乐十分钟彩票| www.416342.com-uc彩票网手机版| www.559501.com-彩经彩票网站| www.318730.com-江西快三昨天走势图| www.638405.com-色彩风景图片| www.12ut.com-小财神福彩3d水心| www.893867.com-彩61app苹果| www.082034.com-中彩论坛讨论专区| www.919903.com-彩票网站开发制作| www.i41.shop-下载排三彩票开奖| www.090051.com-竟彩篮球-| www.363072.com-彩9彩票安卓版下载| www.019383.com-826购彩网-| www.136711.com-易彩乐软件-| www.587418.com-周五体彩什么开奖| www.671053.com-彩吧中国福彩| www.745947.com-湖北福彩投注短信| www.822385.com-彩票投注员兼职网站| www.327989.com-福彩形态-| www.505556.com-名人彩票技巧| www.259873.com-福利彩票机选号| www.253651.com-腾讯时时彩官方网站| www.379666.com-彩票摇奖机出球原理| www.524009.com-时时彩苹果版| www.681085.com-网赌彩票心得| www.933132.com-彩乐乐一彩票工具| www.s34.top-吉林快三不能用手机| www.80rx.com-北控国彩是骗局揭秘| www.3838.mobi-竞彩官方公众号| www.17010.com-彩票門店-| www.66210.com-福彩3d丹东图谜| www.520605.com-快三为什么要限号| www.620370.com-彩票幻圆图-| www.709618.com-彩票网站诈骗| www.x78.net-棋牌彩票官网| www.65pq.com-体彩一年赚多少钱| www.2021.cn-顺发彩票网站| www.7625.xyz-中国竞彩图标| www.25638.cc-彩库开奖-| www.64611.com-竞彩结合外围套利| www.008866.cc-怎么投诉彩票平台| www.44634.com-58购彩-| www.040250.com-网上博彩套利| www.249683.com-天天彩票官方下载| www.690965.com-500万竞彩比分| www.cp703.com-玩快三哪个平台好| www.050874.com-快三怎么玩才赚钱| www.189851.com-体彩江苏ll1选5| www.656980.com-彩贝app平台| www.53120.cc-一分彩彩票软件| www.027132.com-2345彩票导航| www.125437.com-快三打法-| www.663785.com-体彩电脑-| www.744944.com-彩票管理条例全文| www.813959.com-聊彩大厅有红包| www.884932.com-彩神网提现不到账| www.963952.com-风雨彩虹是什么意思| www.cp197.cc-大发快三登录平台| www.533223.com-最简易的彩票| www.42744.com-云彩彩票合法吗| www.110781.com-868彩票下载安装| www.255.red-北京彩票新政| www.59jh.com-鼎盛彩票下载安装| www.6556.com-怎样区分官彩跟私彩| www.h85.club-体育彩票今天开奖吗| www.112248.com-3d彩吧图谜第五版| www.225328.com-福彩快三有规律吗| www.cd99.cc-黑彩输了40万追回| www.28ls.com-彩票正规app| www.4112.me-模拟购彩软件| www.33030.com-广东快彩软件下载| www.085573.com-快三二同号全打| www.218667.com-葡京快三彩票| www.352859.com-老汉直击黑彩福彩| www.502730.com-拉个快彩赚多少钱| www.661559.com-竞彩半全场中奖图片| www.819798.com-澳门彩票开户网站| www.952955.com-竞彩足球胜平负玩法| www.k47.top-福彩快三号码预测| www.324.bid-牛娃彩票-| www.555361.com-华彩控股股价| www.073142.com-8亿彩票-| www.469766.com-外国有哪些彩票| www.662615.com-人工智能与彩票| www.840122.com-500足球彩票调址| 亿彩www.6832r.com| www.xw03.cc-春天彩票app| www.657.website福建泉体彩音乐聊天| www.18954.com-有多少人玩私彩| www.038052.com-爱彩乐广东11| www.197651.com-下载甘肃快三走势图| www.660014.com-下彩彩票怎么打不开| www.307486.com-七星彩历史-| www.99xt.com-体彩刮刮乐宣传图片| www.533204.com-七星彩中奖最高纪录| www.609298.com-七星彩机选号码中奖| www.682244.com-彩票软件提现微信| www.958462.com-发彩网优惠券| www.gc98.com-老彩民网站-| www.536990.com-彩票店起什么名字好| www.060733.com-聚福里体彩店| www.230557.com-福利彩票快3怎么样| www.375581.com-中彩网群英会开奖| www.590256.com-新盈彩彩票-| www.718215.com-吉祥彩票是骗人的吗| www.837571.com-红彩在线提现| www.020085.com-贵州体彩兑奖中心| www.110989.com-杏彩168-| www.277614.com-十分快三玩法| www.362141.com-雨后彩虹的形成| www.566023.com-彩票摇奖视频| www.665587.com-星空彩票网站| www.734468.com-3d胆码预测凤彩网| www.965242.com-福彩胆拖玩法介绍| www.tm39.com-彩报第三版-| www.914030.com-江苏体彩任选五| www.647147.com-体彩排列3中奖公告| www.0088.biz-五洲彩票是真的假的| www.53371.cc-时时彩精选-| www.279863.com-五分时时彩开奖网站| www.3471.vip-爱彩乐天津11选5| www.8432.pw-做时彩网站违法吗| www.986.red-彩票2元网下载官网| www.055195.com-福利彩票有哪些种类| www.260975.com-一分快三和值技巧| www.772921.com-自助领取彩金网站| www.893537.com-快三和值奖金计算| www.972055.com-最近一期福彩开奖| www.sl5.com-体彩论坛-| www.497773.com-悟空彩票进不去| www.576847.com-时时彩大小网页计划| www.675729.com-jw彩票-| www.759382.com-南阳彩开奖直播| www.841836.com-彩票三大属性| www.954307.com-2元彩票专业版| www.cp15.com-合肥快三彩票走势图| www.s09.net-朋友带玩时时彩| www.88oh.com-555彩票靠谱么| www.4427.cc-吉林派彩免费版| www.20279.com-今日竞彩误差| www.78253.com-gc彩票投注网站| www.515.tv-全国福彩积分卡| www.6195.biz-500彩票开奖公告| www.399811.com-分分彩长龙记录| www.927969.com-亿元大奖彩票号码| www.979365.com-南通福彩网-| www.cp713.cc-广西福彩快三走势图| www.00363.com-手机彩票真假问题| www.799503.com-有彩金送的彩票网址| www.872676.com-福彩迷app贵吗| www.935701.com-旺彩预测软件手机版| www.978838.com-体彩7星彩开奘结果| www.cai3777.com江苏快三游戏规则| www.s30.in-广东体彩网十一选五|