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.786690.com-福利彩票3d彩谜图| 500彩票www.50024x.com| www.2162.cn-彩票代购app| www.235386.com-广东福彩公众号| www.808755.com-福彩吧app-| www.916797.com-快三单双玩法| www.982019.com-爱乐透彩票双色球| www.iq8.cc-内蒙古快三50| www.vi02.com-河北快三连开30期| www.18iw.com-找回我的彩票| www.0025.cc-可以填六位数的彩票| www.7268.loan-彩虹六号主动防御| www.461178.com-微信时时彩机器人| www.78ue.com-爱心彩主页-| www.3182.top-体彩世界杯竞猜倍率| www.9000.top-凤凰彩票提现要求| www.47886.cc-海口飞鱼彩票玩法| www.542608.com-三分快三网站| www.jf61.com-派彩网广西快3| www.389364.com-东莞长安福利彩票店| www.619287.com-体彩卫视-| www.749868.com-信彩彩票-| www.362833.com-彩虹是怎样形成的的| www.953996.cc-牛彩网字谜总汇| www.755289.com-韩国彩票查询双色球| www.969631.com-福彩3d贴吧| www.93wb.com-北京基诺彩开奖结果| www.6865.xyz-飞鱼彩票开奖时间| www.21616.com-5亿彩靠谱吗| www.wv65.com-鸿彩彩票怎么样| www.37bj.com-跑狍玄机彩图| www.110389.com-福彩3d未开出的好| www.424177.com-爱心彩-| www.527971.com-大六壬测彩票真经| www.597635.com-澳门福彩app| www.665746.com-万家彩票网一站| www.94hq.com-六个彩l-| www.4242.cc-大乐透杀号唯彩会| www.9861.online和玺彩绘-| www.997024.com-海南福彩快2代理| www.5530.pw-飞跃彩虹第二季| www.1491.me-彩虹寓意什么| www.498968.com-现在能手机买彩票吗| www.608291.com-体彩湖南幸运赛车| www.690683.com-亚洲杯中奖彩票| www.773154.com-福彩快三数表| www.856777.com-体彩七星彩预测| www.931408.com-山东体彩快3走势图| www.997773.com-利彩管方网站| www.cs92.com-网络黑彩大案| www.zx45.com-上海快三查询一定牛| www.28ys.com-256时时彩可靠吗| www.60280.com-爱彩乐走势手机版| www.717535.com-美术作品绘画彩铅| www.849062.com-快乐彩12选5下载| www.356847.com-福利彩票开奖分析| www.564498.com-河内五分彩全天计划| www.644854.com-青岛福利彩票双色球| www.761845.com-官方彩票之家| www.7279.biz-彩虹六号各种版本| www.606253.com-喜盈盈彩票官方网站| www.585190.com-网易时时彩专家预测| www.610019.com-七星彩开奖直播今天| www.93319.cc-今晚七星彩买什么好| www.115155.com-彩铅画人物古风图片| www.886376.com-好运来时时彩下载| www.973516.com-彩虹歌曲合唱| www.jp.com-038彩票骗局| www.f16.club-中国福彩双色球结果| www.949385.com-福利彩票大奖| 金冠彩票www.49956g.com| www.65lj.com-博彩公司的钱怎么洗| www.ll20.com-中國彩吧-| www.32668.com-三分快三计划网址| www.y51.top-福彩中奖奖金兑换| www.029629.com-利盈网址彩票| www.2750.top-福彩双色球走试图| www.x98.cc-彩票棋牌app下载| www.577739.com-查上海快三-| www.33165.cc-福利彩票三d字谜| www.847505.com-合肥竞彩店的重要性| www.507263.com-至尊争霸彩票骗局| www.285197.com-大发快三在线预测| www.hk24.com-福彩字谜总汇| www.104034.com-中国竞彩奖金计算器| www.190080.com-浙江快乐彩开奖| www.6667.org-上海褔彩11选5| www.40125.com-苹果九万彩票官网| www.169615.com-甘肃快三形态走势| www.301898.com-湖北快三今日开| www.629101.com-国外彩票中奖新闻| www.917497.com-私彩网站靠什么赚钱| www.42816.com-免费送彩金官方网站| www.702111.com-体彩足球竞猜网| www.780888.com-88彩票计划-| www.872025.com-内蒙内蒙快三| www.936286.com-爱刮刮自助彩票| www.980839.com-彩票源码购买| www.bn9.com-福彩工作人员骗局| www.xb99.cc-双彩论坛3d字迷| www.219349.com-乐⑧彩票注册| www.271988.com-彩票快三破解器准吗| www.314162.com-重庆市彩时彩停售| www.371.cc-牛彩c567-| www.6654.cm-腾讯分分彩必中规律| www.25822.com-聚财彩票网是否可信| www.75358.com-中彩网2020-| www.4mk.com-加拿大彩票28| www.vr95.com-快三一注多少钱| www.236154.com-江苏快三网易| www.590536.com-四川福彩彩票网| www.898933.com-大信快三彩票| www.5441.cm-体彩计算器-| www.112840.com-哈尔滨有快三吗| www.262990.com-彩圣网免费料大全| www.ea84.com-彩票套利-| www.27265.com-博友彩邀请码| www.817233.com-福彩开奖查询| www.14qx.com-欢乐彩有安卓版吗| www.019723.com-汕头彩票中奖怎么办| www.g69.com-彩独1下载-| www.ow97.com-福彩排3-| www.938.red-体彩胜平负奖金查询| www.802565.com-福彩英雄看胆给大家| www.865679.com-1068彩票下载| www.972501.com-福建省手机快三查看| www.rp76.com-青海快三玩法| www.99038.cc-分分彩技巧玩法介绍| www.128355.com-快三能回本吗| www.iq69.com-一分钟快三软件| www.511.com-谁有福利彩票群| www.qj61.com-好彩2开奖结果| www.32vy.com-体彩25日开奖结果| www.022492.com-梦见买彩票没中奖| www.729817.com-彩票中奖哪里领奖| www.887095.com-彩票改vr-| www.rb29.com-彩票机选器-| www.730832.com-快发彩票app下栽| www.793159.com-500万中奖彩票| www.867664.com-随机选一注七星彩| www.5240.top-温州体彩阳光| www.72498.com-今天福彩几点开奖| www.780765.com-中国竟彩?首页| www.194.cm-三地天天彩报| www.277036.cc-快三开奖黑彩| www.365882.cc-体彩排三跨度和值| www.556839.com-88彩票是赌博吗| www.763676.com-可投注的足彩app| www.898739.com-678彩票pk10| www.983966.com-福彩数字3几点开奖| www.dr11.com-今日彩票开奖| 500彩票www.50051s.com| www.250970.com-彩票巴士-| www.665517.com-精选一注七乐彩| www.768777.com-彩票团队包赔| www.859994.com-彩票导师骗局视频| www.983299.com-足彩app下载| www.ab30.com-快三智能追号计算器| www.zw06.com-建盏七彩如何养成| www.458155.com-海南私彩是几个数| www.561397.com-好彩一预测与分析| www.637650.com-彩虹六号租号平台| www.481.mobi-弃奖彩票案-| www.3867.in-体育彩票家彩开机号|