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天

知道了
百盈PK10 www.159766.com-永辉彩票app下载| www.87nv.com-黑彩11选5爆冷号| www.5384.org-彩票777安卓| www.92083.com-顺丰彩票最新官网| www.592151.com-荣耀彩票网站| www.61vo.com-中国足球彩票网首页| www.uf66.com-彩客网电脑版本| www.357447.com-彩票收回-| www.464849.com-彩票如何看出中奖| www.583085.com-新浪竞彩网比分| www.675377.com-解太湖福彩-| www.789005.com-竞彩购买量-| www.878117.com-福彩前面中3个| www.980414.com-手机梦想彩票| www.ek57.com-概率购彩-| www.8456.pw-彩票站软件下载| www.44014.com-全民中彩-| www.dt78.com-快三公式法-| www.820902.com-七星彩新浪直播| www.ax06.com-福彩5d规律-| www.070838.com-易约约彩下载| www.1007.xyz-福彩领导-| www.j92.com-腾讯体育nba彩票| www.67qm.com-全国有多少彩票站| www.635539.com-中国彩宝哪个品牌好| www.754177.com-5号彩票下载安装| www.837073.com-一定牛足彩-| www.919250.com-有实力黑彩平台| www.977085.com-好彩官方网站| www.aq9.cc-河北快三套选中奖| www.03426.com-通盈彩票是不是真的| www.076880.com-7位数彩票怎么买| www.688634.com-牛彩快三如何做规划| www.914419.com-彩票166登陆| www.dh21.com-彩票达人是正规的吗| www.394198.com-四季型人色彩测试| www.945800.com-福建体彩大乐透| www.pd72.com-福彩排列期开奖结果| www.003.cx-亿彩堂邀请码| www.8534.cc-360彩票电脑网页| www.560434.com-非凡彩票双色球| www.1076.cm-福彩高频彩奖金| www.6576.com-彩民网app登入| www.391853.com-怎么下载彩票网| www.924545.com-彩票最高中奖纪录| www.nv0.com-彩票河南快3| www.967494.com-和彩票托交往| www.308574.com-彩35平台-| www.539268.com-真有人中彩票吗| www.754494.com-登良路彩票大奖| www.916092.com-福利彩票私庄| 网易彩票www.068wy.com| www.644175.com-黑彩网站关闭| www.915693.com-开体彩店要多少钱| www.983471.com-天津时时彩软件| www.jl58.com-天天福彩犯法吗| www.j73.cn-i8彩票平台登录| www.51qq.com-彩票可以玩吗| www.253177.com-时时彩8码滚雪球| www.356907.com-过生日可以送彩票吗| www.517652.com-七乐彩开机号查询| www.630538.com-3d下彩报-| www.2496.cm-体育彩票转让信息| www.8534.loan-360彩票登录| www.416369.com-uc彩票可靠吗| www.72566.cc-长春彩票兑奖地点| www.28484.cc-福彩充钱平台| www.95878.com-中国体彩工资| www.22928.com-我买福彩3d输惨了| www.74195.com-时时彩彩-| www.56132.cc-彩世界平台-| www.30iw.com-十分彩开奖-| www.396909.com-下载中彩网网站| www.228663.com-郑州彩色包装公司| www.813438.com-3d福彩电脑板| www.930732.com-境外彩票大平台推荐| www.988169.com-广东体彩官网| www.jh4.com-福彩3d图谜-| www.qz63.com-快三把我害惨了| www.pk93.com-福彩3d牛票票| www.440825.com-手机好彩客2017| www.565205.com-最新万彩吧-| www.683512.com-义多市福利彩票| www.883199.com-重庆高中生买彩票| www.970234.com-想富年图彩之网今天| www.ug6.cc-新版河北快三百宝彩| www.9ia.com-体彩七位数中六位| www.my19.com-掌上中彩靠谱吗| www.73776.cc-f福建体彩11选5| www.602089.com-好彩票500网址| www.0734.in-博发彩票怎么样| www.44792.com-彩票网上刷流水赚钱| www.041876.com-国外彩票最高巨奖| www.bm37.cc-阿里彩票骗局| www.sa06.com-网上彩票群-| www.00ul.com-彩票买的人越来越少| www.96rw.com-火星彩票平台| www.3394.biz-hcp好彩票网址| www.u46.cn-速盈彩是正规的吗| www.451415.com-333彩网平台| www.097.cc-鑫鑫彩票站怎么样| www.923579.com-秒速时时彩财神| www.073371.com-全民赢彩票最新下载| www.413.red-聚星彩票app| www.835525.com-福彩26选五-| www.969951.com-福利彩票有人中奖吗| www.qj27.com-好彩一八打一动物| www.710.live-时时彩和值任二技巧| www.609078.com-加盟代理彩票时时彩| www.739297.com-买彩票幽默图片| www.855524.com-七乐彩复式中奖表| www.952685.com-天手彩票-| www.sm.com-大发彩票快3网站| www.06za.com-花卉绘画彩铅彼岸花| www.970800.com-财神彩票平台注册| www.077163.com-今日青海快三开奖| www.96491.com-竞彩体彩足球| www.133682.com-易旺彩票登陆| www.238736.com-大发时时彩交流群| www.218416.com-彩票幸运农场软件| www.379608.com-老是幻想自己中彩票| www.526235.com-非法卖彩票定罪标准| www.598144.com-买彩票怎样选号| www.668303.com-去国外彩票公司上班| www.740540.com-乐彩客网页版| www.683897.com-推店彩票合法| www.779229.com-天天时时彩票| www.856936.com-想开彩票站挣不挣钱| www.7fj.cc-河南快三40期| www.127487.com-彩庫宝典-| www.250503.com-中彩彩票地址在哪里| www.314755.com-七彩西游记-| www.xk04.com-鑫彩网是不是假的| www.35uv.com-南国七星彩图纸| www.h98.shop-新浪足彩开奖公告| www.222035.com-挂机软件彩票| www.948812.com-好运快三正规吗| 3668彩票www.3668w.com| 大赢家彩票平台www.810709.com| www.853149.com-手机万彩吧c8| www.6364.in-鸿彩网手机-| www.538937.com-美赢彩票-| www.607703.com-如何申请福彩站| www.672470.com-福彩双色球彩宝网| www.730922.com-易彩网首页-| www.786068.com-体彩扑克3奖金规则| www.858124.com-福彩的关机时间| www.906728.com-彩36官方彩票网| www.213506.com-幸运5快三-| www.301435.com-彩鸿彩票有问题吗| www.358591.com-中国体育彩票资助| www.416037.com-何为黑彩-| www.515196.com-体育彩票结果| www.995139.com-福彩主任违法事件| www.eh02.com-福建体彩兑奖地点| www.17985.com-竞彩是不是骗局| www.559053.com-福利彩票佣金多少| www.635910.com-彩虹七-| www.964459.com-足彩比分气新浪| 网易彩票www.070wy.com| www.274395.com-一分时时彩是哪开奖| www.871497.com-足彩十一选九的软件| www.995463.com-彩票v8娱乐官网| www.289.me-体彩有那些玩法|