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.639488.com-竞彩怎么拉客户| www.89fy.com-中园福利3d新彩网| www.22181.com-微信七星彩-| www.674146.com-彩票走势图开奖公告| www.85056.com-聚彩彩票提现得了吗| www.816028.com-0500彩票注册| www.972028.com-3d福彩彩圣字谜| www.bb71.com-内蒙古福彩中心地址| www.506871.com-非凡彩票安全吗| www.712886.com-刘醒彩虹六号| www.678405.com-福客来彩票北京| www.805291.com-体育彩票排列三规则| www.898178.com-售彩色复印机| www.967325.com-彩票qq群拉手| 盈彩www.yc7701.com| www.v53.com-黑白图库一期期好彩| www.40rk.com-新大陆重庆时彩计划| www.1648.org-体彩开体彩开奖结果| www.14338.com-西港博彩-| www.37729.cc-彩虫app-| www.027679.com-体彩刮刮乐代码| www.181815.com-吉林快三玩法赔率| www.696210.com-鲤鱼立体彩铅画| www.1zb.cc-手机贴膜彩膜| www.604529.com-银海布衣彩吧图厍| www.85115.com-蓝球杀号彩乐乐| www.023570.com-彩票助赢软件苹果版| www.087822.com-极速赛车彩票害死人| www.154653.com-易彩彩票能赚钱吗| www.649827.com-彩虹跑玩法-| www.850470.com-足彩计算器手机版| www.971284.com-乐彩字谜图论坛| www.332039.com-快三注册代码| www.87xw.com-彩之缘-| www.627986.com-中国电脑福彩网| www.168938.com-内蒙古快三343| www.772667.com-时时彩概率漏洞| www.ad4.cc-中国福彩江苏快三| www.6644.top-彩票中奖500万| www.29no.com-彩铅动漫男生头像| www.687760.com-福利彩票官方网下载| www.09sx.com-旺旺时时彩-| www.ee93.com-福彩快三总代理| www.355824.com-英国彩票交税吗| www.453000.com-七星彩华南地区最大| www.38126.cc-福彩今晚多久开奖| www.828113.com-彩票2019035| www.899552.com-彩票对冲是什么意思| www.971017.com-乐橙彩票app下载| www.cai892.cc-快三开奖号码查询| www.701307.com-华赢彩票网站| www.776294.com-时时彩龙虎具体玩法| www.861857.com-腾讯时时彩合法吗| www.934037.com-乐彩彩票安卓版下载| www.267195.com-辽宁快三开奖结果| www.gl.com-吉林快三最大遗漏| www.107791.com-福中彩票怎么样| www.579818.com-大发快三开奖| www.710931.com-彩票刷子平台| www.810227.com-彩票中奖在哪里领奖| www.890205.com-博彩源码修复教程| www.989926.com-彩漂剂效果好吗| www.jw85.com-福利彩吧-| www.1qe.com-大发快三刷流水贴吧| www.63tk.com-体彩3d开奖号| www.1510.site-今日3d牛t彩网| www.797892.com-彩票平台搭建教程| www.970726.com-彩票没中奖安慰句子| www.jl10.com-彩私网-| www.tz40.com-彩票里的长龙怎么玩| www.8833.cm-住桥洞研究彩票| www.739597.com-九度彩票下载安装| www.953694.com-彩票快三辅助器| www.076728.com-猜12生肖彩票| www.by03.com-苏州快三开奖| www.76.me-六冠彩票是什么平台| www.60299.cc-风凰竞彩下载| www.7869.vip-足彩中奖心得| www.352256.com-知名的高频彩平台| www.4612.cm-现在去哪里买彩票| www.360578.com-福彩高管被查| www.560694.com-时时彩手机做号软件| www.674561.com-福彩大奖在那里兑换| www.956446.com-彩泥手工-| 爱购彩票www.335274.com| www.tj09.com-彩票数据中心| www.29ow.com-梅花画法彩铅画| www.5811.cc-足彩的最佳买法| www.485132.com-大发彩票ios| www.571710.com-新年好彩头什么意思| www.639625.com-只赚佣金的竞彩玩法| www.004744.com-凤皇购彩平台app| www.945430.com-福彩双色球迈500| www.nh15.com-杨震胜负彩-| www.875753.com-和记ag快乐彩| www.05333.com-有分模式的彩票平台| www.559314.com-包头市福彩中心地址| www.45085.com-体彩提成是多少| www.013573.com-七乐彩杀号2元| www.827675.com-千禧彩票备用网址| www.899034.com-江苏福彩开奖号码| www.962253.com-福彩购买软件下载| 126彩票网www.701269.com| www.057873.com-中国福彩网积分查询| www.151908.com-全彩汇平台注册| www.145893.com-体彩金手指报纸| www.424477.com-福利彩票内部软件| www.010040.com-足球彩票图片| www.001913.com-凤祥国际购彩| www.130681.com-彩票都是骗局揭秘| www.91ta.com-专业彩票走势图首页| www.01gn.com-彩虹的形成图解| www.560938.com-彩票大师安装不了| www.789631.com-竞彩投资计划表| www.861836.com-qq彩票登录-| www.934003.com-即时开彩下载| www.984246.com-吉林快三开奖一定牛| www.fl3.cc-彩票幸运农场| www.nk52.com-专家足彩推荐预测| www.635484.com-买时时彩有发财的吗| www.727499.com-山东福彩官方app| www.796460.com-上海彩票自助售票机| www.863890.com-彩123论坛下载| www.927893.com-鸿彩木棉业-| www.973343.com-彩虹合唱歌词| 大赢家彩票平台www.197560.com| www.485558.com-支付宝买彩票合法吗| www.2661.top-彩票app没了| www.9056.top-时时彩平台源码出租| www.a55.vip-重庆时时彩玩法心得| www.2619.cm-巨人彩票在线| www.099869.com-首充彩票-| www.292857.com-龙之彩彩票-| www.217369.com-快彩app下载| www.572510.com-彩票扫描对奖| www.5265.space-一般彩票店几点开门| www.33478.com-好用的彩票走势图表| www.014909.com-彩票牛人求职| www.077655.com-算局排列五彩表下载| www.153458.com-北京快三电视走势图| www.253306.com-广东好彩3走势图| www.383097.com-苏州福彩站点| www.559922.com-彩图-| www.794651.cc-新彩吧字谜画总汇| www.948704.com-高频彩主播直播| www.555295.com-万豪国际博彩邀请码| www.699020.com-乐和彩票合法吗| www.51ad.cc-d福彩双色球开奖| www.742773.com-俄罗斯彩蛋多少钱| www.872953.com-uu彩票官方网| www.962501.com-深圳福彩官网首页| www.867978.com-酷浪七星彩论坛| www.984778.com-鼎盛彩票手机平台| www.kb16.com-福利彩票几点开奖| www.w13.bid-三宝乐购中彩网| www.632238.com-揭秘中国彩票| www.982022.com-买彩票的技巧3d| www.272531.com-乐彩网福彩3d首| www.455500.com-澳门博彩戒治中心| www.701099.com-足彩通app苹果版| www.898246.com-今晚七星彩开什么吗| 500彩票www.946277.com| www.49cl.com-七彩礼品鲜花网| www.6072.com-釉中彩的碗好不好|