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.tk45.cc-体彩排三报纸| www.61jj.com-好乐多彩票邀请码| www.6536.top-幸运中彩票软件下载| www.68957.cc-尊彩是什么-| www.094803.com-福彩七加一多少钱| www.388075.com-华彩咨询累么| www.405139.com-福建体彩高频走势图| www.146728.com-信誉最好的购彩平台| www.3237.xyz-合法的彩票平台| www.627685.com-足彩四场进球彩奖金| www.500078.cc-彩票数字万能号码| www.679585.com-人人中彩是真的吗| www.434134.com-福彩三d开奖比率| www.786600.com-海南彩票海彩开奖| www.cai7133.com快三江苏开奖走势图| www.900150.com-22彩票平台网址| www.ax94.com-彩迷下载-| www.82468.com-香港快三全天计划| www.051900.com-彩票3d双福-| www.669829.com-百博七星彩信誉网站| www.912496.com-彩要平台-| 网易彩票www.26163h.com| www.206338.com-神州彩票合法吗| www.314409.com-中国福彩3d规则| www.168880.cc-福彩双色球开奖号码| www.18852.com-中国教育台福彩开奖| www.zi98.com-彩争霸8邀请码| www.57gw.com-贵阳彩票双机转让| www.997924.com-3d乐彩网电脑版| www.pn03.com-彩票选号规则| www.34mg.com-爱彩新浪比分直播网| www.638590.com-竞彩店址查询| www.726713.com-苹果系统买彩票软件| www.802696.com-福利彩票怎么查询| www.879243.com-彩票几位数算中奖| www.952779.com-官方九州彩票| 500万彩票www.39500q.com| www.866808.com-体彩15分钟一次| www.026544.com-彩票分析师合法吗| www.020.cn-最大的网上购彩平台| www.603098.com-盈利彩网址-| www.975740.com-河南驻马店订婚彩礼| www.sp15.com-时时彩数据遗漏| www.672051.com-彩票行业合法| www.824920.com-福彩3d和值跨度| www.936210.com-分分彩刷流水返点| www.775071.com-搜索网易彩票开奖| www.075290.com-双色球彩票价格| www.128521.com-闪蒙快三-| www.212469.com-彩票站加盟费| www.903592.com-福彩3d三天计划| www.64538.com-福利彩票真的假的| www.86ef.com-乐彩网低价乐币| www.41kh.com-绍兴体彩报-| www.006306.com-山东彩票下载| www.33932.com-快三怎么样才能回血| www.069866.com-甘肃福彩双色球开奖| www.168918.cc-内蒙古快三购买| www.836077.com-广东好彩1今晚| www.981593.com-q彩骗人-| www.jg12.com-广西快三遗漏值查询| www.59.biz-福利彩票双色球倍投| www.294563.com-今日体彩三句话| www.318496.com-福彩燕赵风采排列7| www.kh7.com-上海快三怎么玩的| www.562923.com-重庆时彩客户端下载| www.653661.com-奔腾彩票靠谱吗| www.312303.com-福彩快乐三开奖结果| www.960295.com-酷彩吧是不是奖多多| www.568713.com-福彩3d会员-| www.700078.com-福利彩票几种玩法| www.800651.com-福利彩票布衣图库| www.936070.com-博彩漏洞征婚骗局| www.cai433.com-快三骗局揭秘| www.18tk.cc-北京快三正文推存| www.no37.com-体彩预测软件哪个好| www.398311.com-足彩奥克网-| www.64ij.com-竞彩中奖大单| www.920240.com-好彩票原来的官网| www.kc13.com-鸿彩票软件-| www.87pq.com-海口七星彩论坛首页| www.960401.com-风之彩彩票登录平台| PK彩票www.840774.com| www.299090.com-怎样看彩票走势| www.509099.com-qq中国福利彩票| www.095017.com-pc蛋蛋预测彩票| www.8857.org-购买霍德华彩票专著| www.129669.com-中华彩票网李迎说彩| www.858383.com-利龙彩票-| www.71556.cc-手机版卓易彩票下载| www.726608.com-新浪七星彩专家| www.803696.com-9万彩票下载苹果版| www.881558.com-辉煌彩票网站导航| www.947839.com-竞彩彩客网比分直播| 博友彩www.122by.com| www.c72.vip-大乐透购彩截止时间| www.338754.com-今天彩票正版藏机图| www.472687.com-海南七星彩梦解| www.021721.com-酷彩购彩票靠谱吗| www.2420.top-彩视下载-| www.639124.com-余姚体彩销量| www.250725.com-分分中彩票软件| www.828651.com-英国彩票大奖姓名| www.15349.com-彩票倍投的风险| k3k3彩票www.602852.com| www.963952.com-风雨彩虹是什么意思| www.095125.com-排列3双彩图| www.849702.com-中国竞彩网官方客服| www.198100.com-3d彩吧论坛首页| www.645027.com-35彩票网页版| www.749667.com-17年彩票几号开售| www.816499.com-吉林快三系统故障| www.917380.com-彩虹代刷网官网| 彩票坊www.022c.cc| www.la42.com-棒棒彩票骗局| www.669901.com-四位数字是什么彩票| www.957927.com-中国体彩改革| www.jo34.com-网络彩票互刷套彩金| www.871445.com-福彩彩图总汇| www.932073.com-官方时时彩黑吗| www.cai663.cc-北京体彩十一选5| www.vn58.com-快三是否合法| www.29rp.com-陕西体育彩票官网| www.389.red-安徽福彩电话号码| www.4949.hk-60彩票安装-| www.889327.com-如意彩票骗局| www.956627.com-查彩票中奖的软件| www.995990.com-新浪彩票登陆| www.im3.com-vip彩票网-| www.mt47.com-彩票app购买| www.20tg.com-微信时时彩二维码| www.168874.com-湖北快三玩法介绍| www.482916.com-福彩3d开机图今天| www.32992.cc-扬州体彩中心地址| www.99538.cc-福建体彩十一走势图| www.p38.xyz-快三什么时候结束| www.509518.com-彩票500网走势| www.689888.com-彩66彩票网登录| www.785786.com-七星彩预测最准专家| www.860497.com-万能彩票倍投计算器| www.912708.com-六壬与奇门测彩| www.965958.com-香港福彩户门| 百姓彩票www.bxcp3.com| www.479017.com-竞彩足球加奖软件| www.95321.com-足彩盘口分析技巧| www.713193.com-3d博彩吧-| www.292236.com-稳定彩票平台| www.299170.com-极速快三出长龙预兆| www.130907.com-体彩七星彩历史数据| 500彩票www.574377.com| www.477001.com-冮苏体彩7位数| www.9330.loan-大马彩4d-| www.398384.com-七星彩什么时候停售| www.118823.com-竞彩之家官方下载| www.026201.com-黑客能把黑彩给黑吗| www.506163.com-乐盈彩票提现不了| www.660301.com-彩票历史数据分析| www.229112.com-福彩店转让-| www.808934.com-体彩店装修内部图片| www.978574.com-福建体彩票开奖结果| www.pf87.com-江苏快三专业计划群| www.332716.com-艾彩登录-| www.424879.com-官方彩九app下载| www.525996.com-双色球彩88网|