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.879493.com-爱彩通十一选五软件| 彩票58www.585277.com| www.yv73.com-分分快三买单双技巧| www.770256.com-好彩四味爆珠评测| www.868567.com-七星彩规律软件免费| www.954081.com-竞彩足球即时比分| 500彩票www.583477.com| www.lq67.com-中彩网论坛-| www.t53.biz-专业彩票高频彩| www.465995.com-做5d彩超-| www.41712.com-分分中彩票官网| www.028844.com-彩吧网排列三试机号| www.999366.com-足彩工作人员买吗| www.99350.com-时时彩任二组选| www.006460.com-安徵快三夸度走势| www.111408.com-5分时时彩计划群| www.215328.com-瑞彩祥云彩票网站| www.311104.com-极速3分彩官网| www.126557.com-湖北万彩票网| www.201156.com-快三一共多少个号码| www.276356.com-台湾时时彩开奖列表| www.61qw.com-最棒的彩票销售平台| www.44uo.com-常州彩票得主死亡| www.232817.com-江苏快三技巧口诀| www.443662.com-完美彩票cp828| www.558.red-开心鸿运彩票安全吗| www.187433.com-7星彩玩法介绍| www.51839.cc-赢彩彩票冻结账号| www.019358.com-q彩app真的吗| www.366378.com-重庆七星彩开奖记录| www.518398.com-皇都彩票我的账户| www.624611.com-双色球字谜彩宝贝| www.704488.com-易发彩票app| www.794449.com-vr3分彩合法吗| www.21dx.com-山西省体彩怎样兑奖| www.1768.cc-福彩300秒-| www.8478.cc-乐亿彩票可以提现吗| www.730328.com-彩尊手机版安装| www.919269.com-众乐乐彩票-| www.63654.com-竞彩盈亏交易量| www.256508.com-全球彩票游戏平台| www.476704.com-财富彩票平台网址| www.4731.xyz-中彩票后挥霍| www.8bc.com-a爱彩票-| www.3328.tv-彩色的鸟叫什么| www.888335.com-解梦七星彩-| www.wh1.com-福利彩票开奖走势图| www.969159.com-天天彩票正规吗| www.an65.com-福利彩票快乐十分| www.8zl.com-两元彩票走势图大全| www.67745.com-婚恋被骗博彩10万| www.896623.com-彩票真实中奖者| www.506539.com-福彩3d杀码彩宝贝| www.613769.com-体彩11选5最大奖| www.088963.com-体彩新11选5| www.174918.com-福彩快3下载苹果| www.050132.com-中大奖彩票网| www.910438.com-福彩3d对补关系| www.997288.com-彩仙官网-| www.fn04.com-淘彩票大发快三| www.n00.biz-怎样黑进彩票平台| www.74zi.com-体彩几号开卖| www.966369.com-网投彩票快三| www.dw35.com-华夏彩票官方网站| www.6888.biz-广东好彩一今日开奖| www.gz4.cc-江苏福彩网-| www.00220.cc-南方福彩软件下载| www.99573.cc-河内时时彩吧| www.104115.com-彩票辅助透视挂| www.0693.com-彩票机的纸怎么装| www.ov25.com-广西快三顺序| www.574004.com-福建体育彩票吧| www.51215.com-牛彩app真的吗| www.087020.com-乐福彩票登录| www.352609.com-2四六天天好彩免费| www.939026.com-手机599彩票ap| www.cp526.com-哪里有正规快三平台| www.173456.com-安徽快三万能走| www.321518.com-南国彩票排列五长条| www.441116.com-中国体育彩票奖池| www.610626.com-体彩黑8-| www.698914.com-青丘白凤九彩铅画| www.117771.com-网络彩票破解方法| www.97576.com-重庆三分时时彩计划| www.110014.com-体彩列五走势图| www.211118.com-安徽快三投注一件| www.329111.com-体彩排三藏机图| www.467668.com-开福利彩票店利润| www.590770.com-七星彩的对数是多少| www.707281.com-爱彩网主页-| www.821902.com-5oo彩票网pc版| www.640749.com-体彩顶呱刮标志| www.84854.com-出兑福利彩票站| www.065432.cc-3d彩铅画教程| www.45339.com-第一彩票官网| www.88907.com-彩票速查表-| www.041990.com-多彩贵州街-| www.118725.com-兴盈快三邀请码| www.174228.com-查一下彩票开奖结果| www.323362.com-大富翁彩票网站| www.992282.com-新疆喜乐彩怎么玩| www.rh31.com-天津时时彩开奖走势| www.223530.com-彩票网投网大全| www.352982.com-下载福利彩世界| www.zp08.com-赢钱彩从哪下载| www.51755.cc-中彩网18人擂台赛| www.699790.com-彩神平台不给提现| www.843573.com-福利彩票多少位数| www.507173.com-菲律宾二分彩玩法| www.587875.com-竞彩足球手机彩票网| www.676901.com-贵阳彩色压印混凝土| www.253757.com-华宇彩票手机版| 日彩网www.rcw8877.com| www.386290.com-彩票是随机还是人为| www.964083.com-福彩十选五开奖| www.877380.com-河内五分彩官网| www.kt.cc-皇都彩票真的吗| www.z36.net-彩神8客服电话| www.769.cm-赢彩王到底好不好用| www.2009.cm-彩宝贝软件下载| www.929375.com-福彩群英会开奖| www.644510.com-华亿彩票官方网| www.720260.com-七星彩经常开的规律| www.dx5.com-三分快三是骗局吗| www.863.date-时时彩最怕怎样买法| www.54806.com-彩票预测最准的专家| www.015861.com-鸿运彩票网是真的吗| www.133849.com-网上买彩票赚钱骗局| www.823222.com-快彩乐遗漏号| www.972435.com-彩铅画图片人物| www.ga38.com-福彩宗旨有没有赈灾| www.55ej.com-七分彩下载-| www.236658.com-竞彩比分直播竞彩网| www.1861.hk-湖北快三怎么手机玩| www.355360.com-机选彩票大奖得主| www.1ra.com-玩彩票输了十万| www.4528.org-海南七星彩资料4尾| www.982.com-七星彩连中5个号码| www.0xa.com-中彩网高手的姐预测| www.652.live-开奖时时彩软件| www.6805.com-福彩3d数字3单式| www.238289.com-皇都彩票安卓版| www.056785.com-安徽福彩网站| www.288984.com-快三顺龙方法| www.523.me-时时彩停开怎么回事| www.898516.com-时时彩挂机软件教程| www.wj37.com-六开彩开奖结果開| www.626811.com-欧洲彩票开奖号码| www.719224.com-520快三彩票平台| www.822002.com-彩票开奖足球| www.915193.com-小米米彩票-| www.985435.com-首充彩票平台| www.kf33.com-双色球机炫彩宝贝| www.195373.com-上海怎么申请体彩店| www.542901.cc-新浪爱彩3d走势图| www.606822.com-属羊人买彩票的数字| www.660431.com-刮彩票透视-| www.30645.com-下期彩票开奖日期| www.223058.com-贵州福利彩票网| www.426789.com-一分快三有预测吗| www.679753.com-至尊彩主页-| www.827108.com-七星彩能提现吗| www.904369.com-8k彩票下载安装| www.966857.com-江苏快三彩票店转让|