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.00sl.com-易赢彩票平台可靠吗| www.eo67.com-五福福彩官方下载| www.d11.site-远途国际买彩票骗局| www.194673.com-安徽快三预测网站| www.88my.com-福彩大湖字谜| www.33811.com-手机快三怎么玩稳赚| www.33513.cc-排3最准凤彩网| www.iu07.com-篮球彩票吧-| www.cp5531.com-北京快三预测网址| www.978641.com-彩八在哪里下载软件| www.ru08.com-奇门测彩密法| www.280039.com-有靠谱的彩票平台吗| www.hl11.com-什么软件可以买彩票| www.bq66.com-哪家彩票赔的倍数高| www.26859.cc-七星彩17年第一期| www.109276.com-足彩北单预测| www.zc19.cc-上海彩票中奖查询| www.21214.cc-广西体彩客户端| www.434040.com-贵州彩民5000万| www.684810.com-赌时时彩软件| www.984968.com-竞彩外围网站app| www.14446.com-七星彩一等奖最低| www.128259.com-聚宝快三大小规律| 日彩网www.800471.com| www.895147.com-在爱投买彩票安全吗| www.756178.com-彩宝cb8苹果版| www.eb38.com-大发彩票平台| www.36690.cc-澳门有彩票吗| www.061.cm-体彩中奖人员名单| www.178565.com-移动彩票app| www.pi56.com-足彩第19024期| www.813624.com-宁夏彩票中奖去哪领| www.253466.com-网上玩快三会有事吗| www.507085.com-鸿彩主播火火下载| www.971194.com-福彩公益行是骗局吗| www.560090.com-kk彩票app-| www.036356.com-彩票榜代理-| www.127207.com-古风眼睛彩铅| www.025407.com-天天彩选三开奖结果| www.378095.com-彩虹世界电脑版下载| www.122514.com-彩金价格2018| www.622655.com-36o彩票导航| www.658773.com-买彩票错了一位数| www.549122.com-欧冠去哪买竞彩| www.883528.com-稳的彩票台子| www.952640.com-上海快三大小计划| www.gu03.com-梦想彩票登陆| www.6528.in-湖北快三购买技巧| www.83262.com-彩票平刷思路| www.kl50.com-易彩堂彩票登录| www.528797.com-今天彩票指南电子报| www.ja29.com-时时彩计划群里的托| www.298.xyz-七星彩怎么守号| www.55wn.com-pcd彩票-| www.75dn.com-福彩3d上哪里领奖| www.953049.com-九州彩票怎么登陆| www.09886.com-福彩网我的账户| www.868717.com-七星彩第三位杀号| www.4035.cc-香港马会彩票规则| www.552987.com-福彩高频彩软件| www.753709.com-qq彩色字体-| www.504141.com-彩票对打什么意思| www.564758.com-河南省体育彩票官网| www.83885.cc-买彩票能挣钱吗| www.5810.biz-体彩3串1什么意思| www.147896.com-夭下彩免资料大全| www.896408.com-华夏彩票线路检测| www.6667.loan-百盈彩票能不能玩| www.312234.com-下载乐彩33-| www.175873.com-时时彩app苹果版| www.995952.com-足彩大1-| www.46585.cc-甘肃好彩快三走势图| www.560867.com-香港49码彩票| www.220360.com-福建快三走势图i| www.514405.com-王牌彩票是真是假| www.7884.pw-五分快三官网| www.067788.com-怎么搭建彩票平台| www.327239.com-查七星彩开奖号码| www.656483.com-8彩神帝-| www.68uw.com-河南福利彩-| www.390610.com-分分彩怎么玩稳挣| www.839066.com-微彩吧app安卓| www.132823.com-生产彩色纸箱| www.737501.com-七彩奖开如果| www.303613.com-河南快三投注计划表| www.98755.com-时时彩方法研究| www.775412.com-吉林快三技巧集| www.3606.cn-3d南方双彩票| www.007636.com-牛彩网七乐彩预测| www.739.website中体彩走势图| www.314331.com-体彩飞鱼口诀| www.896880.com-彩票长龙最长多少期| www.7922.cc-七彩椒种植-| www.027606.com-易彩堂是不是真的| www.875242.com-彩经网p3走势图| www.273469.com-马云也买过彩票| www.102158.com-关于彩神vi-| www.m83.space-时时彩为啥会上瘾| www.cai6466.com上海今日快三开奖| www.620710.com-盈利彩票官网| www.qu82.com-福彩三天计划必| www.5676.xyz-取消高频彩-| www.653885.com-500竞彩比分网| 大富豪www.315332.com| www.0743.me-新浪手机网彩票开奖| www.1268.in-北京快三有几站| www.h69.net-万通彩票平台app| www.408.cn-旺彩11选5分析| www.28283.cc-常州体彩网-| www.058349.com-福彩3d彩界过客| www.242577.com-168彩票网站下载| www.433529.com-贵州彩民8000万| www.580357.com-彩票弃奖有多少次| www.706383.com-北京福彩论坛去哪儿| www.846851.com-古建筑彩绘报价| www.959885.com-19号彩票-| www.lh9.cc-玩一分快三的技巧| www.yy32.com-乐盈时时彩-| www.96wu.com-易发彩票骗局| www.28609.com-彩票中奖金额| www.068765.com-福彩12生肖开奖| www.254944.com-分分时时彩人工计划| www.364066.com-3分时时彩软件下载| www.559589.com-腾讯赛车彩票计划| www.679228.com-哪种彩票绑卡送彩金| www.796419.com-亚洲购彩网能提现吗| www.910214.com-彩票3d怪字-| www.075060.com-负责任的彩票| www.197982.com-青海福利彩票快三| www.330920.com-时时彩彩票解码器| www.295105.com-快3属于什么彩票| www.480114.com-澳洲快三开奖网站| www.621839.com-五福彩票怎么样| www.567880.com-彩票网怎么盈利| www.681911.com-买足彩技巧-| www.826398.com-手机彩色贴纸| www.951072.com-章鱼足球彩票推荐| www.6101.xyz-彩票开奖专区百度| www.53324.com-时时彩预警专家| www.3df.cc-中乐彩v216-| www.387.cc-苹果x炫彩边框壁纸| www.7445.in-福彩与慈善工作| www.69026.com-尊彩彩票官网| www.210762.com-福彩宁夏快三开奖号| www.333385.com-送彩票给朋友| www.557599.com-酷彩吧彩票骗子吗| www.691200.com-中国体肓彩票开奖| www.818181.com-足彩19041预测| www.8888.gg-守信彩票下载| www.032580.com-怎样辨别彩票的真伪| www.148155.com-哪个彩票平台正规| www.657340.com-中国竞彩网冠亚军| www.867028.com-星期天福彩开奖吗| www.972457.com-乐彩网最新相关文章| www.67nq.com-竞彩干货-| www.5600.vip-福彩3d预l测分析| www.829328.com-新乐彩app下载| www.177587.com-吉林快三计划软件| www.289362.com-七乐彩现场开奖结果| www.8766.loan-吉林福彩官方网站| www.026302.com-三d彩票选号技巧| www.982440.com-全天时时彩免费计划| www.008602.com-足彩19052期| www.301626.com-手机福利彩票app|