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天

知道了
彩01彩票 www.258880.cc-足彩投注量-| www.25618.cc-中国体彩报排列三| www.731592.com-彩票中奖故事新闻| www.808917.com-上海快三杀号技巧| www.879369.com-福彩3d脑筋急转弯| www.948241.com-体彩的大乐透| www.994810.com-跑狗玄机图好彩堂| www.wh8.cc-新加坡快三开奖助手| www.pn47.com-彩乐乐围二遗漏| www.17oq.com-张掖市福彩中心| www.82qf.com-输浙江福彩官网| www.559902.com-外国彩票收藏| www.087901.com-58彩票老版本| www.219514.com-高频彩票就是诈骗| www.304999.com-体彩11选5投注| www.556223.com-福彩吧福彩3d字谜| www.661181.com-128福彩网站兼职| www.749050.com-网上在哪买彩票| www.817271.com-百乐彩是赌博吗| www.887236.com-选三型彩票中奖揭秘| www.957837.com-体彩和福彩合并| 大赢家彩票www.610026.com| www.rh62.com-北京时时彩开奖号| www.26hg.cc-分分彩开奖软件下载| www.270.tv-16亿美金彩票| www.875107.com-新彩吧图谜总汇| www.960433.com-彩票送28彩金大全| www.cp4099.com-快三算法大小| www.pk36.cc-彩票计划者-| www.24.me-国外黑彩犯法吗| www.65bh.com-微彩国际骗局揭秘| www.4910.me-cc彩球网唯一官网| www.10134.com-凤凰微彩官网| www.57708.com-福彩7乐彩中奖图片| www.004343.com-极速彩票秒开| www.81390.com-福利彩票倍投| www.455.club-彩票软件开发商| www.9591.win-海南彩头尾-| www.88748.com-站点微信购买彩票| www.208959.com-下载天天彩票| www.020951.com-众彩网是合法的吗| www.132594.com-米彩-| www.755514.com-大乐透下载旺彩网| www.870479.com-福彩3d两元走势图| www.948813.com-五分彩是什么彩票| 68彩票www.68689p.com| www.035.loan-遇见彩虹的说说| www.4765.wang-南宁福利彩票店| www.21355.com-神彩怎么下载| www.68858.cc-彩票对比器360| www.026555.com-手机博彩排行平台| www.109220.com-彩票服务器修改器| www.208214.com-帮我查一下彩票开奖| www.288226.com-怎么才能看懂彩票| www.369680.com-爱乐透彩票官方旧版| www.ci69.com-山西体彩快乐十分| www.ye14.com-淘宝彩票如何买| www.362431.com-怎样赞美彩虹的句子| www.449976.com-我该买什么彩票| www.539527.com-彩票和值的计算方法| www.607255.com-彩票第一代理加盟| www.672503.com-购彩网官方-| www.755600.com-三d彩绘机-| www.821883.com-七星彩30期走势图| www.886770.com-大大中彩票可靠吗| www.955644.com-查神马彩票网站| 大赢家彩票平台www.117035.com| www.wi91.com-306.com彩票| www.4038.biz-河北彩票站如何盈利| www.955930.com-彩票数据修改| www.ly2.com-中国快三网平台| www.ys90.com-我要看体彩和福彩| www.63rm.com-怎么制作彩票程序| www.5330.me-彩票概率吧-| www.28996.com-c8彩票-| www.91893.com-好彩三八指什么生肖| www.081803.com-时时彩必出规律| www.188657.com-快三屠龙与砍龙| www.266899.com-大发快三注册入口| www.359401.com-如何选七星彩号码| www.450444.com-台湾彩卷-| www.551035.com-财富彩票靠谱吗| www.894964.com-高频彩购彩技巧| www.57778.cc-我要中彩票下载| www.463147.com-时时彩刷流水赚钱| www.590122.com-足彩14场胜负预测| www.663465.com-体彩综合版-| www.361909.com-足彩加官网下载安装| www.528387.com-怎样买中国体育彩票| www.683579.com-彩票免费彩金| www.806966.com-竞彩足球跟单计划| www.917628.com-彩吧助手专业走势图| 彩天下www.196036.com| www.134669.com-彩票查询试机号| www.329200.com-九宫图测彩票| www.20gw.com-19036足彩-| www.0470.bid-福彩3c开奖结果| www.9434.cc-华人美国彩票中奖| www.95791.com-福彩与慈善专题讲座| www.089076.com-吉林快三投注平台| www.194576.com-彩票快讯-| www.301365.com-鸿彩彩票软件| www.420049.com-乐游彩票合法吗| www.815544.com-哪个台能看体彩直播| www.915700.com-彩票代销商-| www.991165.com-491.cc彩票网| www.960849.com-彩票团队大小计划网| www.cp104.com-查江苏快三开奖结果| www.qy16.cc-分分彩计划手机版| www.29bw.com-赛写派彩-| www.2135.cn-牛彩3d9-| www.9733.cm-特彩吧旧版正| www.61342.com-够力七星彩所有版本| www.051808.com-催祥云驾瑞彩福寿| www.143310.com-彩票幸运选号在线| www.234412.com-合法的网上彩票| www.356998.com-哈尔滨福彩快乐时分| www.023040.com-下载彩报中心| www.869997.com-如何看懂彩票k线图| www.443553.com-娱乐买福彩下载| www.087237.com-6c彩票-| www.299408.com-体彩排5今天开奖| www.803804.com-乐彩网首页l| www.983184.com-公务员可以买彩票吗| www.217188.com-福建体育彩票31| www.374844.com-五分⑥和彩平台| www.o88.in-体育彩票买4个号| www.4qw.com-怎么买彩票中奖高| www.260196.com-彩票一等奖兑奖地点| www.136725.com-投资彩票店-| www.678735.com-电工制作彩票网| www.39982.com-3号彩票苹果版| www.080495.com-奇门六爻法测彩实例| www.212287.com-优信彩票大发| www.516112.com-m5彩票登录-| www.2255.hk-彩票赛车软件| www.757567.com-信博彩票是假的吗| www.181068.com-750彩票-| www.459533.com-约彩可以用-| www.7213.com-彩票之家是什么意思| www.86xu.com-怎么在淘宝买彩票| 500万彩票www.936370.com| www.753508.com-哪种彩票真实性高| www.688323.com-东莞体彩官网| www.6732.xyz-福彩3d三胆排行榜| www.86622.cc-湖南省福彩中心主任| www.95103.com-彩妆工作室名字大全| www.347717.com-彩票软件真实吗| www.10uu.com-黑彩代理返点| www.273136.com-三分快三彩票开奖| www.446604.com-3d中华彩票开机号| www.jc33.com-福利三d彩票开奖| www.040099.com-爱彩通走势图电脑| www.be75.com-喜乐彩历史中奖| www.035480.com-彩票数字统计软件| www.219424.com-福彩6加1走势图| www.312332.com-彩票销售聊天技巧| www.521197.com-福星彩图库1| www.876436.com-福利彩票开奖快3| www.117728.com-天下彩开奖在线直播| www.868737.com-新浪七星彩-| www.976065.com-因为彩礼分手| www.354342.com-优亿市场彩票| www.088051.com-双赢彩票手机版登录|