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.771552.com-时时彩后一七码技巧| www.440649.com-qq炫彩字体-| www.369441.com-泉州体彩公主网| www.7039.cm-内蒙时时彩开奖票控| www.392213.com-彩铅人物素描图片| www.539914.com-彩票杀号技巧| www.9368.in-彩票公证员-| www.74458.com-黄金时时彩计划软件| www.639779.com-一分彩牛牛-| www.62gt.com-每天福利彩票试机号| www.8138.in-福彩年后开奖日期| www.xa27.com-搜索贵州快三开奖| www.929.com-福利彩票上海销售点| www.872796.com-118彩票诈骗| www.824048.com-南京三彩折扣店| www.976060.com-林州市结婚彩礼| www.78658.com-竞彩店怎么赚钱的| www.123992.com-燕赵福彩排列期开奖| www.073883.com-快三多单双预测分析| www.6688.me-中国体福建体彩网| www.08482.com-彩票360官网安全| www.94341.com-体彩足彩赔率| www.27er.com-网彩托-| www.4994.cc-无忧彩票网-| www.61146.cc-360彩票走势图全| www.390578.com-分分彩九码稳赢技巧| www.740.net-体彩电脑版-| www.323489.com-七星彩年后开奖时间| www.512162.com-儿童动物彩铅画图片| www.700277.com-辽宁省体育彩票中心| www.813987.com-华亿彩票-| www.894858.com-爱投彩票是正规的| www.cp1170.com-内蒙快三推荐号码| www.mg19.com-安徵快三时时彩| www.449858.com-篮彩网-| www.75289.com-湖北快三追号计划表| www.413877.com-福彩双色球太假了| www.756069.com-彩票排五预测| www.864945.com-下彩网官方下载| 好运彩票www.004hy.cc| www.94121.com-今日新鲜事彩票中奖| www.953947.com-可以自动追号彩票| www.cp9119.com-购彩大厅app| www.311275.com-甘肃快三连线| www.29sx.com-彩票双色球专家选号| www.398.xyz-辽宁福彩中心主任| www.9936.in-江苏福彩双色球走势| www.221700.cc-凤凰彩票破解码开挂| www.420816.com-体育超级大乐彩查询| www.550782.com-高频彩追号近一个月| www.186232.com-类似吉林福彩快3| www.085702.com-博彩漏洞套利违法吗| www.874012.com-彩票坊靠谱吗| www.962121.com-彩涂-| www.cp611.com-彩神大发app| www.051316.com-福彩3d投注站| www.385449.com-159福利彩票| www.515175.com-幸运彩票真假问题| www.602511.com-鸳鸯彩票-| www.055801.com-六位数彩票一直开的| www.613224.com-免费的彩票程序开发| www.13442.com-竞彩8串9容错几场| www.645962.com-竞彩高手哥-| www.337175.com-彩票33官网-| www.82091.com-968彩票登陆| www.28860.com-彩6ios版本下载| www.694574.com-d9官方彩票平台| www.691278.com-万彩网倍投-| www.266276.com-体育彩票12选5| www.495557.cc-大冶市福利彩票中心| www.519610.com-大乐透彩民乐图迷| www.611303.com-彩票有正平台吗| www.99445.com-体彩七位数中奖条件| www.715069.com-快乐彩彩种| www.583059.com-彩票购买平台官网| www.bk07.com-彩票真的有走势吗| www.yh60.com-微信钱包里没有彩票| www.0169.top-彩笔顺-| www.8153.biz-信彩彩票官方app| www.25872.com-彩虹的句子短唯美| www.096345.com-排列五凤彩网专家| www.927239.com-老梁揭秘彩票那些事| www.132054.com-彩礼案例-| www.19812.com-玩黑彩票犯法吗| www.217078.com-哪些省份有福彩快三| www.11sw.com-彩票天下是骗局吗| www.298760.com-幸运3玩法彩票| www.252932.com-500彩票大发快三| www.086098.com-乐山快三精准| www.673359.com-我要今天的彩票| www.801291.com-彩票自动终端机| www.888668.com-大发快三倍投计划| www.16oq.com-辽宁省彩票领奖中心| www.366323.com-国产彩妆-| www.f23.biz-万达彩票合法吗| www.58kc.com-江苏快三有赢的吗| www.0293.pw-彩票站转让多少钱| www.38211.com-新时代彩票平台| www.695013.com-竞彩篮球360混合| www.820568.com-光明全天时时彩计划| www.918784.com-彩票模拟投注软件| www.978452.com-彩色沥青设备多少钱| www.bg63.com-头头博彩app| www.w35.club-91彩神app下载| www.917955.com-网络销售彩票犯法吗| www.974803.com-体彩篮球开奖| www.cai1333.com快三在线投注软件| www.765861.com-快频彩票是什么意思| www.222067.com-大赢家5分钟彩票| www.07fq.com-彩票中奖的钱谁给的| www.029190.com-大乐透2元购彩大厅| www.89pz.cc-怎么做个博彩| www.855063.com-中国彩票走势图表| www.936067.com-博彩刷流水挣钱吗| www.999169.com-彩彩票乐娱平台| www.db71.com-贵州快三分布图| www.44334.com-彩乐522-| www.4738.biz-彩票可以折叠| www.538925.com-开个彩票店咋样| www.760959.com-三分时时彩定胆计划| www.491396.com-体彩排列5中奖注数| www.565189.com-今天的彩吧图第一版| www.670250.com-彩票类型-| www.4567.live-体彩店盈利秘籍| www.906833.com-彩票类型有几种| www.973680.com-快三开奖走势图软件| www.cai4922.com甘肃快三开奖号预测| www.235431.com-微彩娱乐app下载| www.79395.cc-如意彩票技巧| www.192922.com-彩6app官网网| www.237892.com-彩票快3表-| www.90da.com-彩漂剂成分-| www.3299.top-978彩票网提现版| www.200951.com-廉江好彩哥规律| www.284399.com-赢彩彩票网址| www.374037.com-河南体彩领奖地址| www.594068.com-福彩双色球机选器| www.685883.com-七星彩直播现在| www.758078.com-彩票中一等是真的吗| www.865993.com-6491彩票大全| www.959057.com-中国体育彩票中心| www.cp8508.com-内蒙古快三结果| www.z99.com-天天爱彩飘-| www.91rz.com-连中彩票是不是真的| www.8434.cn-彩票纠纷视频| www.34752.com-福彩三d中奖票| www.354715.com-买彩票中奖办法| www.479180.com-福彩大地主杀组合| www.561920.com-易彩网是骗人的| www.251579.com-一号网彩票官网| www.323141.com-福彩30选7玩法| www.432513.com-10年买彩一场空| www.633652.com-幸运彩助手-| www.254053.com-彩票808网-| www.660362.com-腾讯分分彩波动算号| www.813133.com-福彩3d字谜沦坛| www.988394.com-甘肃快三怎么变了| www.vl29.com-幸运时时彩5码计划| www.7356.org-体彩双色球中奖号码| www.675398.com-济阳结婚订婚彩礼钱| www.739446.com-盈彩团队骗局揭秘| www.802122.com-彩运无限可靠吗| www.872580.com-福彩网一下载app| www.929928.com-陕西彩票快乐十分|