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.020264.com-红彩网-| www.891328.com-福利彩票励志广告语| 500彩票www.50051y.com| 500彩票www.401273.com| www.071337.com-人人红彩票-| www.127631.com-彩虹云主机-| www.84698.com-彩票中大奖去哪领奖| www.100860.com-体育福利彩票怎么买| www.140008.com-九万彩票是合法网站| www.256744.com-快三平台靠谱| www.69392.com-哪个网上可以买彩票| www.604862.com-猫彩泥-| www.780986.com-彩虹哥是骗子的证据| www.917253.com-必赢彩票贴吧| 大奖网www.799666aa.com| www.89461.com-金华福彩申请| www.589259.com-新跑狗彩图-| www.665415.com-北京彩票店转让| www.872095.com-大乐透中奖彩票真图| www.988927.com-中福彩3d走势图| www.jt34.com-彩吧首页-| www.68dm.com-体彩竞彩手机版| www.933538.com-时时中彩票下载安装| www.dp3.com-彩之源彩票是真的吗| www.54zf.com-海南七星彩信誉网投| www.56679.com-时时彩输到想死| www.052795.com-进球彩大赢家| www.mj77.cc-湖北快三中奖牛人| www.766643.com-福彩显示器怎么安装| www.874364.com-福彩快三走势一定牛| www.ji36.com-快三杀一号码经验| www.bb59.com-彩票最稳投注方法| www.ud88.com-11选5时时彩| www.09ng.com-闽南体彩聊天室| www.81jm.com-足彩全包最牛技巧| www.341498.com-3d彩邪恶-| www.464986.com-懂球帝足彩怎么领奖| www.560406.com-兴安盟十一选五彩票| www.629385.com-任九胜负彩分析预测| www.166076.com-68彩票靠谱吗| www.954949.com-瑞彩祥云互动大厅| www.cai2020.cc-最新北京快三走势图| www.14698.com-清明节彩票放假| www.345619.com-武汉福彩三d| www.474225.com-3d开机号牛彩网| www.911736.com-福彩3d怎么打| www.56360.cc-中彩网詹天佑3d| www.04428.com-什么平台可以买足彩| www.bm55.com-彩票网站推荐| www.34029.com-玩彩彩票安卓叫什么| www.208582.com-福利彩票查询结果| www.396592.com-新彩票论坛-| www.57967.cc-双色球中奖彩票票面| www.482783.com-京东惠彩-| www.a21.cc-体彩图案-| www.cp5159.com-上海快三是怎么玩的| www.597562.com-网彩赚钱是真的吗| www.675019.com-汇丰彩票辅助| www.750607.com-彩票全自动挂机软件| www.810398.com-彩票休市通知| www.874965.com-信博彩票平台怎么样| www.933745.com-快彩是国家官网吗| www.92440.com-727彩票-| www.869302.com-彩票密码线-| www.790503.com-彩票复试注数计算器| www.3502.org-江西快三走-| www.062451.com-凤凰彩票交流群群号| www.237957.com-大发快三技巧教学| www.hi17.com-全民中彩票下载| www.i23.club-快三彩票倍投技巧| www.60og.com-彩通网3d-| www.4721.cc-好彩客有多少人玩过| www.452826.com-百乐门彩票网站| www.534177.com-梦迷解图七星彩号| www.666082.com-海南七星彩万字表图| www.6163.vip-国际福彩-| www.46665.com-时时彩赌番摊| www.001388.com-彩客网竞彩足球开奖| www.405862.com-北京七星彩内部会员| www.561695.com-手机买世界杯体彩| www.648022.com-福彩3d500网| www.751948.com-亚洲彩票网投| www.880831.com-黑客攻击黑彩平台| www.949254.com-中国福利彩票宣传语| 购彩网www.913gc.com| www.lh22.cc-中彩彩票大小单双| www.x81.net-体彩网点编号怎么看| www.608638.com-福彩赵立群-| www.79rh.com-福彩3d九图-| www.192886.com-727彩票app-| www.402266.com-金祥彩票导航| www.2783.org-彩票维护需要多久| www.94nt.com-体彩十一选5走势| www.93177.cc-怎么玩快三可以赚钱| www.737969.com-福彩三d摇奖机| www.538962.com-宝马彩票老品牌| www.638194.com-中国福彩宣传图片| www.698438.com-彩库宝典官方旧版| www.770946.com-网彩平台代理违法吗| www.838317.com-成都彩钢围档厂家| www.903720.com-彩票合买是骗局么| www.961248.com-网上玩彩票快输死了| 众乐彩票www.237644.com| www.062591.com-幸运五星彩app| www.151878.com-体彩排列5预测| www.5524.gg-福彩3d方案详情| www.032927.com-安然七星彩预测号码| www.395422.com-周五晚上开什么彩票| www.300022.cc-福彩手机购彩软件| www.291327.com-彩票计划师如何骗钱| www.372723.com-彩61大发快三| www.493713.com-今日彩票摇奖| www.580652.com-北京体彩排三走势图| www.791885.com-福彩3d预测大师| 大赢家彩票www.599643.com| www.268522.com-彩吧3d预测-| www.577228.com-中源福彩快三走势图| www.790229.com-炫彩图片大全| www.939133.com-699彩票app下| www.l00.in-彩票棋牌app| www.7934.vip-头彩彩票网页版| www.809212.com-彩票中奖率多少| www.908939.com-7070彩票官方| www.976362.com-安阳农村彩礼| www.893.cx-彩库宝典旧版下载| www.5742.win-今日小小鱼彩吧图库| www.64108.com-竞彩什么情况出平局| www.1203.net-下载体育彩票走势图| www.95pj.com-多彩投众筹-| www.286275.com-江苏快三豹子技巧| www.062423.com-彩票166是真的吗| www.100882.com-时时彩开挂神器下载| www.249055.com-好运来彩-| www.613881.com-中彩啦开挂什么意思| www.941611.com-彩票客户资源购买| www.qp62.com-福彩文化的理念| www.0405.top-福利彩票能买足球吗| www.505218.com-优惠彩金网址| www.783206.com-彩票如何屠龙| www.956889.com-金利彩票网站| www.75yl.com-玩彩乐广西一定牛| www.27904.com-宝马彩票官网| www.788913.com-竞彩投注比例用| www.888845.cc-cp009彩票网站| www.771214.com-五分彩是哪里的| www.1187.biz-如果彩票中了10亿| www.83074.com-邢台体彩中心地址| www.xm62.com-彩票投注站利润| www.585516.com-免费送彩金的平台| www.695741.com-四亿彩票注册网址| www.801685.com-彩运网cy456| www.900871.com-3d水果图彩吧| www.995240.com-彩票中奖符的画法| www.cv68.com-彩神通金码-| www.259110.com-手机福彩自动选号| www.332708.com-陕西福彩开心十分钟| www.435787.com-足球竞彩让球胜平负| www.534670.cc-永旺彩票手机平台| www.604952.com-中澳彩票官网| www.689667.com-彩票回血-| www.771238.com-彩虹e台直播源地址| www.852624.com-亚博体育竞彩网| www.930563.com-e球彩复式投注| www.978831.com-贵州好彩香烟|