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.dm53.com-快三最多出过多少龙| www.204972.com-陕西福彩电话号码| www.400726.com-体彩自助投注平台| www.869120.com-仲博购彩平台下载| 500彩票www.330892.com| www.809870.com-众乐彩票能玩吗| www.899880.com-聚彩彩票app| www.975340.com-彩票混沌周期表| www.gx4.com-彩票1教你开挂| www.877599.cc-多网彩迷-| 全民汇彩票www.52303s.com| www.0120.com-中彩网3d字谜汇总| www.318575.com-炫彩彩票-| www.169608.com-快三计划软件下载| www.753079.com-彩神计划是真的吗| www.868018.com-南国体彩开奖结果| www.978429.com-好彩网今晚一注预测| www.391901.com-天鲸娱乐彩票| www.162883.com-福彩快三多少钱一注| www.347722.com-福利彩票数字彩| www.443955.com-意彩官网-| www.667519.com-诺基亚星际彩球游戏| www.781338.com-恒彩88登录地址| www.883753.com-苹果下载不了博友彩| www.962649.com-彩票平台银河| 鑫彩网www.xcw866.com| www.519223.com-乐盈彩票进不去了| www.0495.in-内蒙福彩3d出啥号| www.652000.com-红牛快三彩票| www.767144.com-牛彩app-| www.835862.com-福利彩票代销证办理| www.900804.com-河北福彩排列7开奖| www.964038.com-福彩和尾-| 500彩票www.50788m.com| www.615586.com-31选7私彩怎么买| www.689884.com-66彩票网6516| www.8678.mobi-下载福彩开奖号码| www.22001.cc-亿彩彩票网站合法吗| www.253884.com-天津时时彩走势图| www.12uw.com-福彩三分彩开奖结果| www.77as.com-三d彩票预算公式| www.835137.com-好彩假烟-| www.785960.com-xr开原彩-| www.925631.com-多金彩app诈骗| www.pr8.com-派彩网付费板| www.127729.com-彩虹app生成| www.721905.com-彩票走势大全| www.790322.com-双色球彩票分析数据| www.863660.com-安徽省体彩中心主任| www.925080.com-穷人买彩票好吗| www.974429.com-怎么用app买彩票| 大赢家彩票平台www.695093.com| www.360849.com-富贵彩下载官方网站| www.26998.cc-北京pk拾彩票图案| www.656277.com-七星彩清明节| www.nl7.com-湖北快三大小走势图| www.wn02.com-彩客网彩票官网| www.27le.com-买彩票中几十万| www.66lh.com-288彩票可靠吗| www.1300.xyz-快三爱彩乐江苏| www.119711.com-快三根号怎么倍投| www.283.me-大公鸡七星彩手机版| www.14146.com-今日足球竞彩赛程| www.806729.com-彩票站兑奖额度| www.015730.com-七星彩安卓手机版| www.sm11.cc-足彩计算器-| www.120803.com-重庆时彩胆拖玩法| www.365734.cc-买彩票中奖最高的人| www.101361.com-金豆彩票下载| www.648986.com-一定牛快三推荐| www.8923.wang-天下第一高手彩票| www.45017.com-利民彩票论坛| www.692168.com-彩播是啥意思| www.699180.com-竞彩投注计算器| www.94569.com-竞彩奖金优化| www.19118.com-中福利彩票领奖程序| www.871730.com-快三微信二维码| www.cp267.com-甘肃快三今天走势图| www.dd68.com-赢彩彩票与你同行| www.12ff.com-八彩娱乐app| www.1828.biz-电话购彩票怎么买| www.4964.cm-彩猫龙猫-| www.4380.shop-云彩网彩票安卓版| www.0102.host-彩色的组词-| www.015641.com-七星彩兑奖图| www.233941.com-中国福彩开奖时间| www.373782.com-广东快彩开奖| www.619956.com-福彩舆论-| www.737312.com-辽宁快三彩票怎么玩| www.221597.com-彩票破解软件靠谱吗| www.68884.com-盈彩在线官网| www.fn94.com-官方福彩幸运快3| www.522468.com-51彩虹下载-| www.xn17.com-快易彩票app下载| www.1416.vip-皇室彩票是什么| www.922047.com-彩票自动售卖机终端| www.067964.com-哪个彩票平台信誉好| www.46577.com-福星彩开奖号码| www.xp85.com-海南今天七星彩预测| www.853654.com-排三杀号定胆彩乐乐| www.185423.com-pc福彩是什么| www.119908.com-全球彩靠谱吗| www.661741.com-七星彩开奖提醒| www.821011.com-时时彩在线计划数据| www.314667.com-时时彩口诀-| www.849140.com-福彩3d最准杀码公| www.940052.com-南国彩票论坛4+1| www.991361.com-121彩票走势图| www.xs6.com-精彩十分怎么玩法| www.tr78.com-贵州快三官网| www.6446.biz-做网络彩票销售员| www.18088.com-3位数的彩票怎么买| www.dq09.com-5省快三-| www.07sm.com-彩铅如何画皮肤| www.6178.pw-彩色混凝土供应| www.987759.com-505彩票本着| www.mm91.cc-最佳彩票平台| www.197995.com-青海福彩-| www.348789.com-陇彩宝网站-| www.598203.com-传统足彩竞彩网| www.761905.com-陆慧明看今天足彩| www.936468.com-中福彩票下载| www.pq46.com-体彩助手-| www.272179.com-广西快三44遗漏值| www.7162.loan-七彩本草-| www.566023.com-彩票摇奖视频| www.mg87.com-福泰娱乐快三下载| www.901445.com-网上彩票导师| www.cp3327.com-一分快三正规吗| www.141946.com-如何在竞彩猫上推荐| www.228585.com-彩票快三开奖时间| www.309509.com-福彩三d位积和| www.381915.com-泰安市体彩中心| www.051971.com-快三直选中两个| www.795499.com-体彩中奖去哪领取| www.885340.com-神州彩app下载| www.189831.com-幸运快三计划软件| www.34756.com-新彩吧图库多彩网| www.808661.com-竞彩任选九玩法| www.901930.com-怎么开黑彩网站| www.967772.com-彩票开奖l结果| www.iq9.com-内蒙快三和值走势| www.605707.com-小米彩票被起诉| www.709315.com-五行预测彩票规律| www.779819.com-福彩3d出号特征表| www.842309.com-福利彩票分配比例| www.7191.biz-七彩云烟多少钱一条| www.0796.net-共赢彩票进入| www.5287.cm-智彩在线走势图| www.29ws.com-新浪爱彩aqq下载| www.585653.com-彩票双色球如何购买| www.597167.com-智博彩票网-| www.408484.com-网上购七星彩| www.749435.com-网购彩票正规网站| www.985597.com-竞彩必发交易量| www.ks82.com-彩票分析师靠谱吗| www.660968.com-福彩3d中奖经验| www.034052.com-七星彩机选-| www.221.xyz-三分钟时时彩规律| www.774300.com-七星彩的中奖等级| www.1577.vip-多彩贵州集团官网| www.995614.com-传统足彩返奖| www.fi64.com-福利彩票快3奖金| www.l70.com-彩神和值大小|