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.49566.com-湖北快三走势图开奖| www.100241.com-互联网禁止销售彩票| www.898680.com-香港致富彩-| www.112164.com-彩金88元-| www.127906.com-彩虹倒带歌词对比| www.207762.com-彩票应用大全下载| www.41wy.com-足彩胜负平计算器| www.125643.com-中国福彩3d诗谜| www.919902.com-制作一个彩票网站| www.988069.com-快三计算软件| www.kw2.com-快三有没有规律| www.rb78.com-腾讯时时彩怎么投注| www.22.xyz-足彩独赢-| www.4908.vip-福彩了d-| www.797873.com-彩票码源哪里买| www.xx65.com-职业彩票玩家| www.0754.site-5亿彩官方下载| www.78er.com-足彩输了几百万| GO彩www.gen00.com| www.946262.com-彩经网首页走势图| www.kv17.com-武汉快三遗漏| www.621678.com-福彩三d中奖事| www.873489.com-网易购彩合法吗| www.e87.club-金七乐百宝彩| www.7849.biz-吉林快三当庄| www.370268.com-ee彩-| www.499141.com-车彩是怎么玩的| www.723756.com-博乐彩平台下载| www.809212.com-彩票中奖率多少| www.896096.com-体彩天下app| www.968535.com-五亿彩是真的吗| www.cp2985.com-时时彩报警后果| www.517530.com-彩票娱乐登录平台| www.359364.com-体彩超级大乐透微博| www.521089.com-11选5体彩群| www.678379.com-福彩乐透乐网址| www.432600.com-体彩七位数开奖日| www.551775.com-周一彩票-| www.200951.com-廉江好彩哥规律| www.5258.cm-派彩金额反水是负数| www.503750.com-557彩票下载| www.736708.com-荷花彩铅画图片| www.684022.com-体彩跨度遗漏| www.866105.com-腾讯5分彩票官网| www.86223.cc-3d乐彩字谜-| www.83983.cc-彩票能异地兑奖吗| www.995143.com-竞技体育彩票| www.kd24.com-手机买彩票哪个靠谱| www.83.cc-22彩票提现不到账| www.0232.pw-中国福利彩票案| www.fn5.cc-2019时时彩公告| www.sq27.com-分分快三稳赚技巧| www.52mw.com-南京彩礼和嫁妆| www.2243.com-手机版福利彩票| www.9820.cm-江西快三11选5| www.02469.com-福彩3d复试投注| www.62417.cc-中国贵宾室彩票| www.42277.com-天吉彩票-| www.907893.com-彩票平台出租那个好| www.983867.com-福彩一等奖兑奖流程| www.rc0.com-福彩10分钟开奖| www.057831.com-彩吧迷图第二版| www.158030.com-竞彩足球加奖| www.229129.com-开彩票店辛苦吗| www.298331.com-内蒙快三有何规律| www.383273.com-分分彩平台出租| www.520773.com-彩之星印刷-| www.89206.com-盈彩网注册-| www.121646.com-体彩6十1开奖号码| www.9905.tv-澳洲3分彩官网| www.978800.com-皮得欢好彩1预测| www.r78.cn-福彩3的图迷总汇| www.85io.com-竞彩足彩和中奖规则| www.949309.com-搜索彩票开奖公告| 大赢家彩票www.589411.com| www.899599.com-彩81下载苹果| www.726210.com-371博友彩登录| www.825028.com-衡阳福利彩票在哪里| www.899743.com-邯郸福利彩票站转让| 网易彩票www.095wy.com| www.634547.cc-江苏快三人工预测| www.51474.cc-小孩吃彩虹糖的危害| www.726608.com-新浪七星彩专家| www.ji26.com-发彩网幸运快三计划| www.625932.com-彩票彩民乐-| www.125639.com-彩票密码线原理| www.455688.com-凤凰彩票有没有风险| www.223936.com-浙江体彩网手机板| www.408083.com-今日专家足彩预测| www.582468.com-京彩集团彩票| www.781674.com-福彩快三新规| www.854667.com-时时彩开彩计划| 500彩票网www.65707k.com| www.gn45.com-进口彩妆加盟店| www.155479.com-足彩欧亚指数| www.aj43.com-够力七星彩新版本| www.001719.com-彩吧网福彩分析预测| www.8109.vip-九万彩票幸运28| www.267156.com-19052期足彩| www.638111.cc-竞彩能当做事业吗| www.763332.com-时时彩6期必中| www.875314.com-安徽福彩快三一定牛| www.957364.com-今甘肃快三-| www.cp3977.com-快三奖金-| www.sp93.com-直播彩票-| www.4622.vip-一万买彩票-| www.971545.com-快2彩票下载手机版| www.34dg.com-今天买什么七星彩票| www.675659.com-19022足彩-| www.42og.com-熊猫彩铅画-| www.935552.com-c6com彩票-| www.345124.com-体彩现场开奖| www.307036.com-内蒙古时时彩玩法| www.437282.com-鸿运彩票安卓下载| www.577081.com-好彩泰国多少钱| www.699975.com-彩彩客网-| www.l43.cn-财神彩票平台靠谱吗| www.331399.com-c81彩票下载| www.449995.com-买彩票的男人能嫁吗| www.395600.com-彩虹歌谱-| www.73sx.com-彩票倍数是什么意思| www.049939.com-甘肃十一选五爱乐彩| www.659425.com-彩票中奖海南| www.767829.com-中彩网是干嘛的| www.894260.com-彩票大奖图片| www.961085.com-名鸿娱乐彩票下载| 500彩票网www.658770.com| www.9wg.com-彩彩票选号技巧方法| www.693540.com-头奖彩票系统恢复| www.9511.in-3位数买什么彩票| www.52639.cc-分分彩后三组三技巧| www.480005.com-足球胜负彩容易吗| www.561830.com-爱购彩票是骗人的| www.42is.com-黄鹤楼彩色包装纸箱| www.lc65.com-109彩票-| www.50614.com-福彩双色球查询中奖| www.522105.com-彩票贩卖机代理| www.581058.com-香港马彩-| www.668833.cc-七星彩算法公式| www.751251.com-体彩足彩多少钱领奖| www.830263.com-567彩票ios-| www.904518.com-江苏快三购买网站| www.969430.com-新昌双彩下岩张玉安| www.bs48.com-快3彩票平台app| www.006554.com-公众号好彩-| www.159155.com-福彩图迷字迷猜数字| www.2518.cn-江西多乐彩前三组选| www.38237.cc-贵州省彩票中心电话| www.91lu.com-牛彩官网手机版| www.1233.net-重庆彩全天计划稳定| www.817777.com-足彩19024媒体| www.887897.com-977的cc彩票| www.qb1.com-至尊彩10分快3| www.054456.com-众网彩票是骗局吗| www.512120.com-小鸟画彩铅-| www.573925.com-信用卡积分兑彩票| www.638835.com-体育彩票专管员| www.84om.com-快乐5分彩犯法吗| www.aj88.cc-七星彩今天预测号| www.500972.com-重庆五分彩规则| www.604068.com-迷彩兔下载| www.338740.com-彩尊登录下载| www.028455.com-内蒙古快三摇奖现场| www.39757.com-中福快三下载网址|