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.590127.com-易购娱乐彩票| www.737707.com-福彩快三送彩金| www.830678.com-福都彩票下载| www.915760.com-彩票店可以转让吗| www.985432.com-彩票充值-| www.sw7.com-河北快三预测推荐表| www.tr43.com-台北快三正规吗| www.16tt.com-3的字谜双彩论坛| www.1040.space-乐彩网最新开奖结果| www.8738.biz-刮刮彩票中奖图片| www.39779.cc-梦见刮彩票上瘾| www.92798.cc-东莞体彩申请表| www.065881.com-彩虹世界app下载| www.134896.com-好彩铁盒-| www.211559.com-江苏福彩快三技巧| www.293981.com-中国福彩42期| www.365577.cc-彩铅人物手绘| www.474736.com-3d彩吧论坛牛材网| www.564719.com-金亚洲彩票平台注册| www.649558.com-澳门博彩娱-| www.917014.com-乐迎彩票正规吗| www.976588.com-山西彩礼-| www.ot39.com-彩票3d领袖贴吧| www.7he.cc-彩票复式规则| www.73to.com-输年月日查彩票运势| www.1839.vip-依彩化妆品图片| www.03480.cc-兴盈快三app| www.53035.com-中彩票安卓版下载| www.002614.cc-关于福利彩票的文章| www.077028.com-vr三分彩官网| www.148144.com-湖南省福利彩票兑奖| www.286752.com-福利彩票站好申请吗| www.380082.com-注册送888彩金| www.516502.com-魔方体彩-| www.590990.com-唯彩看球直播软件| www.670047.com-独秀显风彩的意思| www.753593.com-往年中奖彩票被调| www.929802.com-天天中彩票计划| www.989429.com-福体彩最新开奖大厅| www.eb8.cc-内蒙快三规律破解| www.qa83.com-093彩票官方版| www.07tk.com-七星彩明月珰晋江| www.83gu.com-3d彩民乐精华图| www.2248.in-梦见别人买彩票中奖| www.8308.hk-大彩电-| www.32656.com-江苏体彩几点开奖| www.80352.com-网上拉你玩彩票的人| www.036225.com-彩票走势图软件手机| www.190447.com-安安徽快三开奖结果| www.268062.com-湖北快三基本走势| www.369647.com-彩票七乐彩单式| www.472504.com-彩乐园2官方网站| www.560763.com-杏时时彩平台手机版| www.636471.com-ig传统彩开奖官网| www.762383.com-87彩店最新版| www.843823.com-重庆时时彩最新消息| www.915376.com-三分彩全天计划| www.979315.com-内蒙古快三统计表| www.eq34.com-炫乐彩票苹果版| www.xn80.com-88彩票11选5| www.19tk.com-华阳创美彩票合法吗| www.649.pw-彩华出众专家专栏| www.4942.cn-彩帝彩票是合法吗| www.03876.com-大家不要买彩票了| www.50958.com-彩75app-| www.95109.com-福彩数字构成| www.060708.cc-聚华体彩店下载| www.198325.com-贵州省福利彩票中心| www.273171.com-t体彩的宗旨| www.371070.com-初中彩铅风景画图片| www.474977.com-福彩图氐-| www.555657.com-西藏快三开奖结果| www.626694.com-河北福彩2o选5| www.698097.com-浙江台州体彩中心| www.776814.com-江苏快三号码走势| www.915432.com-淘宝招彩票代玩| www.976040.com-开封结婚彩礼| www.wd4.com-蚂蚁彩票中了一等奖| www.rr65.com-彩票纠纷-| www.09ou.com-体彩直播聊天室泉州| www.78gs.com-有台湾5分彩的平台| www.1800.org-彩坛之王-| www.9876.link-扬州体彩转让| www.52732.cc-55彩票网页版本| www.96362.com-蒲城彩票店转让信息| www.060678.com-幸运彩彩票网站| www.163772.com-中华彩票网投安全吗| www.253211.com-时时彩全天计划蜂巢| www.324279.com-乐彩网中奖能提现吗| www.392679.com-梅花画法彩铅画| www.536802.com-41cc金彩网-| www.620342.com-国外彩票业-| www.687997.com-广东省体彩中心在哪| www.766740.com-聊城彩票代理加盟| www.873366.com-特彩吧手机开奖结果| www.952789.com-彩票中奖的概率| 众发彩票www.589zf.com| www.ec89.com-彩票刷流水犯法吗| www.wd05.cc-1分快三规律破解| www.11lg.com-福彩3+地试机号| www.79qh.com-中国彩票软件开发| www.1485.xyz-彩博888会员资料| www.09277.cc-短信买彩票-| www.50712.com-福彩双色球查询| www.92179.com-彩票a-| www.046321.com-51彩票登录-| www.218234.com-百盈快三规律| www.287147.com-安徽申请福彩| www.382201.com-彩仙阁挂机软件怎么| www.504266.com-中国福利彩票通知| www.573251.com-中信积分兑换彩票| www.640068.com-福彩三天计划必出| www.750027.com-快三私彩-| www.813383.com-彩票巫师双色球预测| www.882244.com-玩彩票的女孩子| www.966703.com-快3彩票大小单双句| 财神网www.29277l.com| www.ek71.com-体彩排列三试机号| www.uu14.com-老彩民高手论谈| www.01fr.com-体彩正版藏机图| www.65bv.com-今日彩票字画谜| www.0454.in-彩票网站多少钱| www.9638.org-今日体彩胆码| www.47748.com-好彩妹蛇精扮演者| www.88131.com-老彩民网站有信誉吗| www.036672.com-赌快乐彩好方法| www.133824.com-江苏快三推荐三同号| www.204026.com-彩票不亏本玩法| www.268968.com-大资本彩票是骗局| www.369151.com-梦见合买彩票中奖| www.455228.com-皇冠国际彩票赚钱| www.536769.com-中彩网能投吗| www.632745.com-nba在哪买彩票| www.695070.com-鸿彩网是不是骗人的| www.767640.com-牛蛙彩票网站手机版| www.868675.com-巨丰彩票-| www.931494.com-致富彩票邀请码| www.982022.com-买彩票的技巧3d| www.cx64.com-彩神vi合法吗| www.sl08.com-足彩今日推荐竞彩| www.04ub.com-吉林快三心得| www.67bo.com-乐彩彩票软件下载| www.0303.la-彩拾彩票软件下载| www.7733.win-万彩双色球走势图| www.21331.cc-澳洲28是彩票吗| www.58983.cc-下载福彩藏机和直迷| www.025662.com-甘肃快三开奖| www.090509.com-3g彩票-| www.144141.com-新浪爱彩时时比分网| www.210965.com-七乐彩开奖号码| www.274559.com-快三输惨了-| www.388389.com-彩票买单双骗局| www.501601.com-手机投彩是真的假的| www.565736.com-华坪竞彩网点查询| www.625487.com-最专业彩票销售平台| www.686456.com-500彩票跟计划| www.752995.com-哪种彩票网正规| www.870400.com-江苏快三号码统计表| www.942000.com-快三四码复式二中二| www.985211.com-728彩票线路| 13e彩票www.810852.com| www.ga05.com-浙江省快乐彩走势图| www.vd39.com-河南省体彩网| www.9gs.cc-体彩七位数能买吗|