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.857280.com-怎样可以网上买彩票| 金冠彩票www.49956h.com| www.3232.in-彩票999官方网站| www.727780.com-福彩双色球复式中奖| www.842880.com-彩票不蒙面领奖| www.936536.com-全发彩票-| 彩虹8www.ch8955.com| www.j31.org-青海福彩3d-| www.57mg.com-福彩25万的游戏厅| www.886250.com-合买彩票月赚上万| www.166365.cc-今天上海快三开奖| www.37836.cc-彩票app都没了吗| www.878957.cc-49彩票网址手机版| 众发彩票www.589zf.com| www.730209.com-易彩快3开奖查询| www.819799.com-哪个星座中彩票| www.920049.com-最新彩票开奖公告| www.988716.com-时时彩可以改号码| www.gi10.com-江苏五分钟快三| www.d32.club-特区彩七星彩论坛| www.45nf.com-hdp看彩虹台| www.1733.vip-彩神viii下载| www.01277.com-gc国彩怎样充值| www.73750.com-cp1248彩票-| www.196194.com-爱彩乐计划-| www.200773.com-七星彩特区论坛| www.283769.com-六福彩开奖结果查询| www.363657.com-雨后见彩虹什么意思| www.371888.cc-牛彩彩票网能赚钱吗| www.517801.com-海南7星彩解梦软件| www.pk2.com-马来西亚生肖彩| www.47of.com-中国体彩双色球| www.fy3.com-7星彩怎么算中奖| www.rs29.com-彩票app破解方法| www.29077.com-大发彩票计划网| www.949731.com-禁止彩票-| 500万彩票www.98528g.com| www.0820.wang-彩虹宝宝彩虹宝宝彩| www.53767.cc-最正规的时时彩平台| www.172056.com-福彩5d玩法-| www.135826.com-福利彩票怎么对账| www.136808.com-7彩网一分快三| www.706006.com-发彩网是什么情况| www.09eh.com-哪个公司的体彩官网| www.2144.win-彩票36选7-| www.237594.com-官方授权彩票app| www.327790.com-国彩网投彩票可靠吗| www.255747.com-福利彩票排列五| www.20001.com-大红鹰彩票网欢迎你| www.030183.com-大发云彩票合法吗| www.yl69.cc-天下彩票与你同行| www.6717.com-彩票兼职招人群| www.08219.com-足彩专业术语详解| www.46ll.com-亚洲彩-| www.453480.com-什么是彩光嫩肤美白| www.567626.com-安康福彩中心| www.657022.com-彩票二维码怎么扫| www.404312.com-卡通狗年画彩铅| www.559652.com-陇彩宝官网-| www.206428.com-三分快三彩票合法吗| www.984860.com-手机彩票做号软件| www.101416.com-立彩彩票可靠吗| www.258070.com-大赢家彩票手机版| www.399984.com-竟彩开奖查询| www.542273.com-炫乐时时彩-| www.208559.com-彩票拉人专业术语| www.295432.com-3d彩吧迷图-| www.411939.com-双色球彩票预测网站| www.527599.com-时时彩和尾跨度表| www.602072.com-买彩票没给钱怎么办| www.813029.com-玩彩票扣扣群| www.4535.vip-七星彩所有号码买完| www.440858.com-中l国体育彩票大乐| www.883723.com-博友彩票平台| www.970089.com-网上购彩最好平台| www.cai3932.com网络平台快三可靠吗| www.172965.com-贵州福利彩票| www.956217.com-玩彩票赢了几十万| www.280888.com-重庆福利彩票网| www.372150.com-彩票的条形码怎么看| www.032105.com-足彩精算师必看书籍| www.161666.cc-香港快三彩票吗| www.366832.com-qq易迅版彩票| www.410815.com-本金2000玩彩票| www.573592.com-m5彩票登陆网址| www.665746.com-万家彩票网一站| www.737668.com-辽宁福彩3d和值| www.816068.com-福彩3d几点开奖| www.882228.com-彩879骗局-| www.952278.com-不停售的彩票app| 杏彩www.00840i.com| www.jx98.cc-彩票七星彩怎么玩法| www.4867.cn-e球彩开奖历史记录| www.303162.com-好彩1复式投注| www.387759.com-华彩置业董事长| www.885201.com-彩票代玩兼职犯法么| www.950213.com-金龙彩票注册网站| www.991558.com-百宝彩免费账号| www.ad60.com-q彩票-| www.802399.com-竞彩五百万-| www.906094.com-18k彩金-| 福彩www.16878o.com| www.pm47.com-福彩3d字画迷大兵| www.75tg.com-萍果精彩片段| www.083558.com-体彩南方网-| www.282213.com-时时彩开奖走| www.pf1.com-彩6com-| www.257097.com-微彩彩票下载| www.665838.com-七星彩中奖地查询| www.64335.com-彩妆蛋-| www.814722.com-延安福利彩票双色球| www.751642.com-可以提现的彩票网站| www.835169.com-lucky绿好彩| www.892915.com-500彩票软件大全| www.975958.com-环彩网app苹果| www.dz99.com-彩神8大发快三骗局| www.486825.com-足彩定胆是什么意思| www.590712.com-中彩堂真准资料| www.115707.com-彩票代购交易| www.0571.com-福彩3d计划-| www.0642.org-微信国际彩票投资| www.12421.com-彩70彩票欢迎您| www.768404.com-免费彩铃-| www.848831.com-足球直播唯彩| www.919522.com-彩票5首页-| www.974364.com-七乐彩奖池余额最新| 博汇www.861830.com| www.341335.com-微信快三稳定群| www.099511.com-彩票摇奖机苹果| www.40804.com-体育彩票网址| www.304477.com-河北快三连线走势图| www.897099.com-乐彩赢主页| www.281020.com-彩96彩票-| www.441167.com-手写彩票走势图| www.088617.com-彩吧彩票单双大小| www.86fo.com-足彩19010-| www.3134.cn-翻天熊足彩500万| www.050398.com-黑彩规划倍投可信吗| www.72218.com-搜索宝马彩票| www.705249.com-体彩竞彩怎么兑奖| 9号彩票www.80767w.com| www.485455.com-彩票公式兼职真的吗| www.629962.com-福彩3d北海推荐| www.251882.com-中彩吧55125| www.224914.com-五分快三免费下载| www.02121.cc-有人让我玩5分彩| www.057095.com-安徽快三王-| www.049938.com-福彩冮苏快三| www.70957.com-彩金群-| www.573823.com-山东体彩扑克3规律| www.42949.com-天津七星彩开奖结果| www.905385.com-开体彩店怎么赚钱| www.960646.com-98时时彩登录平台| 财神网www.29277d.com| www.pd22.com-3d福彩中奖号| www.892524.com-彩票开奖360| www.984018.com-福彩体彩开将结果| www.zz43.cc-体彩店面装修| www.505763.com-怎样玩黑彩能挣钱| www.2292.in-百信彩票app| www.795765.com-彩票大发速八| www.300113.com-双色球彩票指南彩报| www.507165.com-非凡彩票可以赚钱吗| www.263862.com-彩票老师带赚|