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.ab66.com-甘肃快三遗漏官方| www.cp8552.com-今日甘肃快三走势图| www.11gf.com-新彩陶瓷-| www.sn30.com-今日竞彩信息| www.027211.com-078彩票是真的么| www.789175.com-皇冠竞彩平台| www.88532.com-乐都彩票下载| www.613365.cc-阜阳福彩助你上大学| www.3104.me-500彩票正规的吗| www.47289.com-彩礼地图-| www.044928.com-k彩登录平台| www.128337.com-一分时时彩是哪里的| www.954535.com-彩77安卓官方下载| www.6876.org-港彩开奖结果| www.322714.com-百度福彩123| www.194094.com-福彩快三害死人| www.305856.com-彩票没有钱-| www.381484.com-体彩19030-| www.485477.com-时时彩输的倾家荡产| www.115271.com-体彩顶呱刮运20| www.917215.com-彩铅画教程视频| www.7829.biz-免费领取彩金游戏| www.502031.com-kk彩票真的赚钱吗| www.270271.com-安全的彩票软件大全| www.388071.com-体彩机转让-| www.522966.cc-时时彩怎么压都是输| www.656597.com-体育彩票转让北京| www.e00.pw-足彩八串一-| www.79ky.com-七星808彩-| www.275342.com-极速时时彩官方开奖| www.455443.com-福彩坊-| www.631679.com-700万彩票网官方| www.781817.com-黑彩怎么能赢| www.909142.com-星彩医学美容| www.982928.com-下载彩83官方| www.362891.com-福彩放假-| www.602023.com-88彩票预侧-| www.718546.com-七色彩虹的寓意| www.890812.com-青岛市福彩中心| www.cai4822.com江苏快三开-| www.i73.com-江苏福彩3d论坛| www.198809.com-10选5彩票骗局| www.345125.com-体彩排列5直播| www.386184.com-运盛彩票导航路线| www.57956.cc-江苏彩票七位数规则| www.957092.com-求手机彩票挂机软件| www.cp8478.com-内蒙古快三360| www.pv38.com-长城购彩-| www.09ci.com-中彩网开奖信息| www.76pz.com-购买体彩最后时间| www.1112.me-足彩五串一错一场| www.7859.org-足彩过滤技巧| www.24692.cc-鲸鱼彩铅画教程| www.32076.com-中国竞彩网官网主页| www.55994.cc-快三怎么选号| www.lw43.com-好彩妹石敢当的手| www.677709.com-今晚足彩预测| www.772393.com-分分时时彩骗局揭秘| www.879998.com-陕西福利彩票官网| www.jn69.com-5亿彩票app下载| www.015616.com-七星彩可以网上买吗| www.326583.com-彩票身边中奖| www.465905.com-分分彩漏洞在哪里| www.779410.com-8828彩票官网| www.659148.com-网易直播七星彩直播| www.80834.com-搜狐彩票网-| www.083452.com-东彩娱乐真假| www.177110.com-新快三合不合法| www.162448.com-e球彩害人-| www.12558.com-爱乐透福彩双色球| www.554930.com-体彩福彩黑幕曝光了| www.388979.com-七分彩网站-| www.0154.pw-服务大厅新浪爱彩| www.9700.top-三d风云彩票| www.93176.cc-玩快三怎么赚钱| www.075978.com-彩票达人app| www.73ao.com-手机福利彩怎么玩| www.6267.cm-福彩3d的万能四码| www.260067.com-福彩快三计划| www.864462.com-长红彩票app| www.579044.com-金祥彩票官网网址| www.690418.com-重庆竞彩网是真的吗| www.027719.com-合乐彩票注册| www.46xi.com-彩票站布局效果图| www.110324.com-彩票业改革-| www.024723.com-99彩票时时彩| www.123049.com-中神彩下载-| www.789184.com-足彩购买技巧方法| 大赢家彩票平台www.068672.com| www.767916.com-新淘彩网-| 全民乐彩票www.2934a.com| www.137487.com-易彩网官-| 云博彩票www.882186.com| www.337798.com-彩票网排列三| www.422600.cc-福彩体彩y销售网点| www.266373.com-8号彩票提款靠谱吗| www.720658.com-刮刮乐福彩自助终端| www.816664.com-昨晚福彩开什么奖| www.884975.com-传奇彩app下载| www.948691.com-微信群吉林快三| www.990409.com-下载牛蛙彩票软件| www.qj2.com-吉林快三开奖今天| www.wf24.com-时时彩历史开奖号码| www.42ld.com-七彩云南歌曲试听| www.489.in-彩天堂登录页面| www.56mc.cc-天天中彩票怎么领奖| www.987204.com-全民福彩软件| www.ja21.com-快三群有没有托| www.554369.com-彩票三角码怎么组合| www.636008.com-查询七星彩开奖号码| www.d06.top-七星彩的秘诀| www.262272.com-快三遗漏号-| www.971392.com-特区七星彩海南论坛| www.cai2211.com河北快三跨度| www.2287.vip-体彩排列三三句话| www.520820.com-福彩大奖-| www.29ed.com-牛蛙彩票王中王| www.46174.com-全天在线时时彩计划| www.96491.com-竞彩体彩足球| www.259244.com-福彩怎么选号| www.347543.com-吉彩网上输了一万多| www.424488.com-彩票充值没到账| www.547775.com-口袋彩店app下载| www.622216.com-广州体育彩票官网| www.711163.com-黑彩票不能提款| www.787811.com-亚博体育竞彩| www.869197.com-七星彩机选号码器| www.951634.com-正网oa时时彩出租| 中彩网www.91233z.com| www.095272.com-彩票诈骗举报电话| www.0655.website福彩销售点申请| www.203687.com-福彩5d中奖多少钱| www.38bw.com-青蛙彩立即前往| www.521708.com-三位数彩票开奖查询| www.641445.com-体彩七星彩logo| www.254518.com-好彩是什么软件| www.959008.com-3d新彩网手机版| www.cp9663.com-今日中彩-| www.2981.xyz-网络彩票网站吗| www.54963.com-时时彩心得-| www.168913.com-今日贵州快三走势图| www.016168.com-查询彩票的软件| www.78925.com-快三多少倍能封顶| www.358440.com-时时彩asp源码| www.1503.wang-彩虹屁夸男生| www.503831.com-如何卖彩票-| www.35co.com-南海网南国彩票社区| www.2636.xyz-999彩票怎样| www.8819.pw-分分彩龙虎漏洞| www.51711.cc-凤凰时时彩正常登录| www.815975.com-网络博彩报警有用吗| www.680076.com-彩拾彩票靠谱吗| www.308502.com-6合万彩开奖结果| www.67sc.com-多乐快三是哪里的| www.258615.com-新浪老式竞彩比分| www.868944.com-七星彩规律讲解| www.336686.cc-福彩快三坑人么| www.386676.com-山西体彩中心官网| www.z01.club-八七彩票-| www.734012.com-安徽竞彩快三| www.14300.com-体育彩票36选七| www.395221.com-彩虹app下载| www.448540.com-佰万彩票官网| www.044448.com-七星彩预测号码推荐|