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天

知道了
亚洲28 www.bj30.com-北京快三下载| www.797536.com-自创彩票选号方法| www.358743.com-体育彩票6加1查询| www.601615.com-七星彩利民彩票论坛| www.1040.me-七乐彩宝贝-| www.608844.com-秒速赛车荣鼎彩| www.766888.com-三d彩报第一版图谜| www.923325.com-彩票店几点营业| www.gk2.com-彩票店倒闭-| www.x15.com-学生玩彩票输了几千| www.82398.cc-广东省体育彩票中心| www.j38.me-湖北福彩3d开奖| www.63nu.com-大圣彩票软件下载| www.98043.cc-35彩票下载安装| www.957798.com-彩乐透是什么| www.443253.com-快三和值遗漏| www.3678.biz-体彩十一运夺金预测| www.cp230.com-如何玩快三赚钱| www.186825.com-分分快三提前开奖| www.508770.com-彩16合法吗-| www.968087.com-6188彩票骗局| www.23282.cc-快三游戏苹果| www.807021.com-彩易科思回收彩票| www.721678.com-500彩票计算机| www.ch75.com-福建省福彩网| www.35323.cc-逆袭彩票计划手机版| www.80dv.com-彩票2元h-| www.5272.pw-体彩网点营业时间| www.94789.cc-500足球彩票调址| www.228318.com-河南彩礼标准引热议| www.668806.com-华人彩8800彩票| www.359912.com-七星彩是一元一注吗| www.529811.com-快手彩票交流| www.19314.com-彩发发app官网| www.nj73.com-凤凰竞彩app下载| www.312977.com-体彩幸运号码| www.91674.com-好彩什么颜色好抽| www.693865.com-运盛彩票作弊| www.773848.com-王雷中谈国外竞彩| www.847744.com-山东菏泽结婚彩礼| www.913234.com-彩票两2元网| www.983684.com-快三站-| www.t23.net-湖南福彩官网| www.028014.com-红彩网app下载| www.845630.com-福利彩票历任主任| www.35208.com-天津静海福彩群| www.888142.com-赛马派彩-| www.987289.com-彩73娱乐-| www.be20.com-喜乐彩票-| www.sa87.com-2019互联网售彩| www.933755.com-几分钟开奖的彩票| www.222825.com-彩票五行对照表| www.149178.com-安装人人中彩| www.239722.com-王者彩票提不出现| www.36862.cc-幸运彩票计划群| www.401296.cc-彩百万娱乐app| www.549555.com-足球彩店app下载| www.624228.com-彩票33号平台| www.724222.cc-查看彩票开奖| www.72lk.com-甘肃体彩爱乐彩| www.36fx.com-火星5分彩计划软件| www.026256.com-彩票站违法-| www.881292.com-百姓彩坛高手论坛| 易彩堂www.55885h.com| www.uy42.com-c23彩票登录| www.52667.cc-好运彩票赚钱| www.856671.com-七星体育彩票走势图| www.968436.com-福建彩民论坛网| www.mt7.cc-内蒙快三玩法介绍| www.02pc.com-惠民福利彩票| www.1221.space-华彩1到3级-| www.095807.com-福利彩票的开奖结果| www.207659.com-七乐彩彩票过滤软件| www.365606.cc-幸运彩票ios下载| www.22016.cc-河南彩锦纺织| www.042641.com-多彩贵州网考试| www.912723.com-3d体彩开奖结果| www.974945.com-彩票查询大乐透预测| www.va00.com-广西福彩发行中心| www.33jf.com-日本中国足彩分析| www.083408.com-智博彩票平台| www.171692.com-彩票开奖贵州快3| www.260631.com-福彩快三赌博| www.131548.com-山西长治彩礼价格表| www.350186.com-云鼎彩票网-| www.496321.com-8g彩票网站登录| www.kc76.com-彩9彩票-| www.608733.com-赛马派彩及结果s1| www.bd93.com-内蒙古体彩兑奖地址| www.9304.win-中国铁杆彩民大鱼号| www.833723.com-赢家彩票用户注册| www.946736.com-快8彩票中奖规律| www.060563.com-福彩53-| www.192956.com-澳发彩票app平台| www.836264.com-彩票a-| www.964082.com-湖北体彩网首页| www.866358.com-搜狐分钟彩票官网| www.259698.com-手机时时彩做号器| www.201441.com-福利彩票有三秒三| www.311552.com-云南时时彩20选五| www.399522.com-sk国际彩票-| www.65341.com-青海福利彩票代销| www.14tt.com-最新玩彩票平台| www.224399.com-百盈快三平台| www.319269.com-福彩快三秘诀| www.156047.com-好彩客苹果手机| www.245528.com-易彩堂彩票可靠吗| www.317566.com-竞彩稳赢-| www.387459.com-手机彩膜制作机| www.119746.com-快三秒奶茶配方大全| www.223111.cc-福彩3d跨度走势| www.319508.com-公告彩票中奖i| www.385433.com-易算时时彩手机版| www.500049.cc-今天都那个彩票开奖| www.s47.org-银川千彩摸吧在哪| www.512837.com-鼎盛彩票登陆网址| www.951975.com-彩天下靠谱吗| 大赢家彩票平台www.635893.com| www.uc50.com-彩神软件在哪儿下载| www.31qs.com-有关彩虹歌词周杰伦| www.964386.com-完美网彩票网页版| QQ彩票www.89894g.com| www.cp7687.com-黑龙江快三查询| www.322302.com-彩票研究-| www.384234.com-体彩大乐透广告语| www.233358.com-中彩网安徽快3| www.355814.com-欧洲彩票税率是多少| www.20313.com-易彩堂提现不了| www.90585.com-彩友多店铺号| www.169687.com-分分快三平台| www.92527.com-160彩票客户端| www.gz88.com-幸运彩票正规吗| www.308836.com-彩票计划手机版| www.bc70.com-北京多乐彩合法吗| www.165219.com-体彩大乐透大奖| www.677755.cc-华彩赢家与彩票分析| www.759707.com-湖北路快三遗漏| www.71580.com-网易彩票官网网址| www.106896.com-网上时时彩彩票漏洞| www.723228.com-东彩娱乐登录| www.53595.com-腾龙时时彩做号官方| www.325511.com-福彩几分钟开奖的| www.535371.com-5个数的彩票| www.54vz.com-南宁福彩自助投注机| www.54509.com-大发时时彩杀一码| www.077187.com-3d福彩技巧-| www.177798.com-十分快三技巧| www.267977.com-彩圣字谜今天| www.393975.com-3位数的彩票是什么| www.33737.com-703彩票网正规吗| www.657207.com-七彩龙鱼多少钱| www.791672.com-南洋乐和彩几点开奖| www.860005.com-ee彩票是真是假| www.062351.com-广西快三全天计划网| www.295131.com-彩吧图谜总汇| www.712569.com-网上买时时彩违法吗| www.826229.com-澳客竞彩彩票app| www.022301.com-彩票网恋骗局| www.919863.com-彩票高手完整视频| www.ag29.cc-河南快三遗漏表| www.26953.com-乐彩网玄机图p3| www.59637.cc-赢彩彩票与你同在行| www.609050.com-分分彩后三后二杀号| www.44wq.com-千百便彩票-|