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天

知道了
东京好运彩 www.4898.me-彩票游戏代打是什么| www.227063.com-彩库宝典最新开奖| www.616148.com-福彩3d倍投器| www.929303.com-七星彩中三个号| www.751843.com-彩票辅助系统| www.06672.com-特区7星彩下载| www.89606.com-好彩雷-| www.749201.com-休育彩票网-| www.59359.cc-nba篮彩预测| www.355704.com-足彩怎么扣税| www.865422.com-澳客足彩网-| www.891045.com-彩票用语谜材| www.638273.com-上海中国竞彩实体店| www.802132.com-福源网彩票-| www.985533.com-竞彩足球14场规则| www.sa99.com-黑彩破解器-| www.133739.com-新福彩3d人工计划| www.964747.com-彩富足彩网-| www.cs47.com-上海快三彩票开奖| www.111468.com-彩票电子注册送28| www.983038.com-乐迎彩票下载| www.753977.com-搜狗彩票快3| www.474890.com-五彩绳怎么编视频| www.794537.com-重庆时乐彩开奖号码| www.860229.cc-河内五分彩公式| www.932768.com-易彩票极速快三攻略| www.986883.com-彩金彩卷高手彩富网| www.bc30.com-福彩3d字谜专区| www.p99.org-福利彩票3d预测| www.gt97.com-网赌快三背后控制| www.150168.com-手机彩票投注| www.387406.com-彩膜分部是什么| www.862606.com-东北快三今天分布图| 吉利彩票www.66376o.com| www.262623.com-福彩定位胆玩法技巧| www.563367.com-7星彩票开奖走势图| www.700441.com-亚投彩票五分快三| www.871136.com-7星彩体育彩票| www.tu05.com-福彩群英会扫码下载| www.100.red-家彩论坛排列三论坛| www.zo73.com-今日竞彩足球预测| www.59rp.com-福利彩票游戏可靠吗| www.546828.com-澳客网手机买彩票| www.831048.com-日免软好彩多少钱| www.949104.com-三星福彩平台| 600万彩票www.187513.com| www.0025.online是几个数彩票| www.9851.cm-古建柱头彩绘| www.149325.com-福利彩票什么叫倍投| www.235077.com-中彩那天课文教案| www.212573.com-靠谱的私彩平台凤凰| www.004191.com-天下无敌版彩吧图库| www.066061.com-有海南七星彩网投吗| www.126984.com-优彩师app-| www.4dy.com-老谢说彩3d61期| www.668885.com-六彩宝典-| www.297396.com-手机上怎么玩快三| www.459966.com-福利彩世界总代理| www.608330.com-陕西省福利彩票| www.912424.com-欢乐彩主播-| www.975500.com-七星彩投注技巧| www.kg38.com-银川福彩中心地址| www.29045.com-彩名堂彩票软件下载| www.94433.cc-nba竞彩交流群| www.917063.com-彩铅画图片动物| 58彩www.vt34.com| www.951434.com-聚彩app下载| www.xk7.com-湖北快三形势走势图| www.19qs.com-点击进入精彩内容| www.48dx.com-体彩标志jpeg| www.657071.com-七星彩质合数走势图| www.952694.com-彩票内部中奖| www.k19.cx-湖北快三走势图看看| www.588017.com-购彩vapp-| www.689958.com-彩票足彩-| www.768567.com-数字新浪彩票网首页| www.852256.com-五分彩定位胆走势图| www.915726.com-加盟福彩-| www.980126.com-海南彩票网-| www.cc19.cc-吉林快三盘在哪买| www.2zn.com-举报网络彩票有用吗| www.m30.mobi-大发快三程序框架| www.as93.com-2d福彩玩法-| www.ts97.com-福彩双色球下载苹果| www.21uo.com-体彩题库-| www.488891.com-彩票刷流水不被发现| www.603716.com-彩票怎样中大奖| www.211490.com-上海上海快三走势图| www.344103.com-大发快三争霸赛| www.440811.com-澳彩新浪竞技风暴| www.563971.com-内蒙快三最牛预测| www.21.biz-香港五分快三| www.362662.com-一支彩染发安全吗| www.490149.com-9b彩票会员登录| www.560189.com-体育彩票三d试机号| www.617108.com-彩票3d带线走势图| www.676404.com-天天购彩-| www.064903.com-福彩3d口诀个位| www.529856.com-直播刮彩票-| www.09288.com-网上怎么买福利彩票| www.826862.com-唯彩篮球-| www.36917.cc-577彩票升级版| www.96212.cc-福彩大奖在哪里领| www.995847.com-竞彩足球ios软件| www.yz92.com-五福彩票安卓app| www.47wu.com-新浪爱彩是骗人的吗| www.840.mobi-二八彩票充值| www.715912.com-乐彩论坛乐彩网| www.835398.com-联盟黄金炫彩| www.956018.com-乐彩双色球字谜总汇| www.ad65.com-七乐彩开奖结果| www.wg66.com-旧版360彩票| www.13no.com-郑州体彩中一山| www.33829.com-彩票分析师app| www.710252.com-彩票平台首充送彩金| www.792113.com-7彩颜色-| www.880816.com-福利彩票机器人怎么| www.951880.com-彩天下彩票正规吗| 彩之家www.028082.com| www.fj77.com-时时彩反倍投心得| www.vl53.com-下载彩票开奖软件| www.80my.com-国际彩票中国彩| www.167895.com-中国福彩快3网站| www.240524.com-福彩3d彩票大赢家| www.237311.com-华夏彩票app下载| www.349067.com-我中啦彩票网有密| www.444585.com-p五跨度南方双彩网| www.602057.com-打彩票不给钱怎么办| www.706119.com-发彩网平台-| www.oj79.com-彩界狂人独胆| www.41tn.com-米彩昭阳的小说| www.1603.wang-全球彩票苹果手机| www.0235.vip-时时彩杂六什么意思| www.06982.com-下载彩票中奖软件| www.0434.vip-彩吧助手缩水工具| www.87273.com-彩票吃人-| www.043947.com-彩票积分扫一扫| www.175129.com-贵卅快三开奖结果| www.298439.com-贵州快三二同号推荐| www.459262.com-彩票3d众彩网| www.46883.com-三分时时彩分析软件| www.022483.com-2彩票网-| www.123178.com-易算时时彩准吗| www.243448.com-中国福利彩票分析| www.73828.com-体育彩票网上能买吗| www.079227.com-时时彩二星万能码| www.265025.com-江苏快三跨度| www.61398.com-众彩网预测专家预测| www.519755.com-够力七彩票奖表下载| www.697790.com-彩库宝典图库| www.104378.com-宝乐彩票可信吗| www.746239.com-万人炸金花彩票| www.673169.com-彩铅画教程画苹果| www.791766.com-梦想彩票触屏版| www.964135.com-网上是几点买彩票| www.3780.vip-南国彩票七星彩| www.118953.com-中国福利彩票预测| www.452954.com-彩吧三d图谜第五版| www.682391.com-什么平台可以买足彩| www.934799.com-彩盈自主彩票| www.nm42.com-福彩快乐彩12| www.1127.cc-竞彩打单-| www.9369.me-体彩官员违法乱纪| www.57193.cc-苹果彩八下载|