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.11554.com-新浪彩票数据图表| www.ap79.com-黔南州福利彩票中心| www.120041.com-彩经彩票下载| www.258320.com-310足彩网-| www.621139.com-福彩连连看属于哪的| www.350058.com-买彩票负债累累| www.49vj.com-强强彩票软件| www.q51.org-安徽最大的彩票弃奖| www.75kp.com-足彩最多能买多少棵| www.886608.cc-福彩3d机选投注| www.981934.com-福彩怎样算中奖| www.si0.cc-彩票开奖双色球玩法| www.77ol.com-玩足球彩票输死了| www.075351.com-手机上买彩票安全吗| www.812833.com-七乐彩论坛-| www.820.in-彩虹糖广告词| www.900651.com-赢钱彩app苹果| www.z63.com-海南彩票打码| www.560273.com-上海彩亿能买彩票吗| www.fo69.com-线上快三-| www.846132.com-彩票怎么知道| www.601803.com-巨人彩票账号注册| www.697393.com-七星彩头尾一赔几多| www.797683.com-彩票代购源码| www.999237.com-中彩谁家房什么意思| www.ue15.com-福彩直播开奖现场| www.596536.com-3d彩博士预测今天| www.3811.cc-福彩论坛中国最大| www.5491.net-双彩网首页走图大全| www.7733.com-青蛙彩一秒前往| www.033172.com-中国福彩双色球开奖| www.118700.com-福利彩票买号规则| www.445957.com-福利彩票乱买| www.317353.com-怎样做一个职业彩民| www.506394.com-福彩36期开奖| www.602682.com-永盛彩票网app| www.271985.com-一定牛老版本彩票网| www.2521.wang-彩图诗句看图解码| www.62780.com-彩客网竞彩开奖| www.039773.com-恒大彩票官方网站| www.1025.vip-白映彩-| www.006473.com-福建体彩开奖| www.709567.com-河北快三计划网页| www.829171.com-九彩彩票安全吗| www.3373.me-类似足彩加软件| www.40548.com-360彩票还能买| www.28795.com-彩票套取盈利合法吗| www.941948.com-福彩十选5-| www.746868.com-彩票网站优惠| www.929592.com-彩票7星彩-| 网易彩票www.07163x.com| www.8259.xyz-彩之源快3下载| www.27em.com-熊猫彩票手机| www.894801.com-查一下彩票中奖开奖| www.829194.com-害人彩票-| www.466624.com-七乐彩销售截止| www.590259.com-体彩中奖在哪里兑奖| www.667153.com-广西快三开大小| www.113386.com-湖北省福彩3d| www.276605.com-十分彩的江苏快三| www.590059.com-国家彩票管理规定| www.939004.com-澳客彩票以前版本| 818合彩www.www.9889hc.com| www.795888.com-至尊彩平台下载| www.34262.com-上海彩票官网| www.516767.com-奇门遁甲测港彩| www.617366.com-万州福彩中心在哪里| www.706232.com-中国竞彩网首页计算| www.789014.com-唯彩彩票投注| www.876786.com-彩票以大博小技巧| www.974732.com-买彩票守号-| www.cl21.com-浙江有快三吗| www.g98.net-彩宝l输了好几万| www.338459.com-永诚彩票网-| www.382305.com-智慧人彩票软件| www.289678.com-怎么做黑彩平台代理| www.356019.com-啥是玩彩-| www.424042.com-三国无双赵云和星彩| www.512787.com-彩吧vip购彩下载| www.572038.com-竞彩倍投最稳的买法| www.631582.com-2018年广东彩王| www.83su.com-好彩票苹果app| www.813408.com-28是什么彩票| www.54308.com-时时彩刷漏洞真的吗| www.94132.com-体育彩票社会责任| www.088256.com-澳客彩票预测| www.51rl.com-彩票青蛙过河| www.065925.com-雨后彩虹图片| www.026437.com-百姓彩坛网站| www.639650.com-竞彩销售管理细则| www.gc29.com-排三乐彩网-| www.608758.com-派彩金额是不是反水| www.760490.com-彩票平台怎么刷分红| www.894861.com-i8彩票台子怎么样| 500万彩票www.808731.com| www.yd61.com-韩国彩票官网| www.86rn.com-乐彩3论坛-| www.675372.com-彩娱乐app-| www.bi26.com-快开彩-| www.503231.com-谁会做彩票软件| www.355678.com-彩票开奖结果对比器| www.984621.com-彩虹8娱乐真的假的| www.ga22.com-彩托-| www.n49.tv-新浪彩票网官网首页| www.647011.com-彩票工具软件破解| www.757842.com-伍佰万彩票-| www.mg61.com-爱乐彩十一选五| www.235822.com-5分彩计划网| www.140087.com-买足球竞彩网| www.766997.com-福彩中奖号是多少| www.cai02.cc-初学快三-| www.58791.cc-河北体彩昨日走势图| www.uo83.com-体育彩票大乐透走势| www.20or.com-体彩19016期| www.266604.com-时时彩遗漏怎么追| www.070860.com-下载一定牛江苏快三| www.9652.biz-河北永年县农村彩礼| www.481.xyz-河北福彩7位数| www.4811.biz-开三个数彩票| www.984958.com-运彩网app-| www.426087.com-福彩藏机诗汇总| www.182857.com-亚洲彩票是不是正规| www.84989.com-民政部彩票2017| www.034996.com-中彩网擂台赛双色球| www.241567.com-河北保定快三查询| www.949223.com-体彩福彩论坛| www.520868.com-体育彩票销售点申请| www.678419.com-湖北快三是什么样的| www.761812.com-海南七星彩局王奖表| www.820168.com-彩礼杀人-| www.884183.com-网上彩票能控制吗| www.946602.com-下载注册送彩金彩票| www.995705.com-北京单场是什么彩票| www.pz41.com-彩票9app-| www.972473.com-彩票双色球开奖号| 七乐彩www.766352.com| www.es26.com-手机中彩网客户端| www.ua67.com-彩票推广术语| www.70695.com-一品彩-| www.5222.online福彩八卦图哪个最好| www.706939.com-微信买彩票软件| www.037492.com-时时彩助手-| www.4801.top-彩虹六号腾讯挂件| www.357693.com-博彩老排列三| www.6033.org-云南福彩领奖地址| www.20829.com-足彩竞彩单场胜平负| www.99961.cc-彩票大家嬴-| www.vy65.com-手机玩快三骗局| www.61rv.com-棒棒彩票正规吗| www.619749.com-分分彩大数据网| www.rz96.com-彩票跨度怎么算| www.755040.com-彩票87平台合法| www.902386.com-买3d黑彩5码| www.ne01.cc-手机彩票软件排行| www.90557.com-3b福彩网站大全| www.059548.com-k彩彩富民地| www.905241.com-江西体彩快3走势图| www.72gs.com-体彩容错表解释| www.vi73.com-湖北福彩网公告| www.19jo.com-肥城福利彩票站点| www.109115.com-金利彩票会给钱吗| www.294127.com-23彩票下-| www.356946.com-朋友送的彩票中奖了| www.466980.com-黑白彩图库-|