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天

知道了
1分快三 www.8431.wang-中国竞彩网直播比分| www.67869.cc-重庆时时彩万能七码| www.042211.com-吉林快三免费计划网| www.132077.com-河南濮阳各地彩礼| www.211357.com-彩神之首双色球三胆| www.286798.com-淘彩彩票app| www.430226.com-鸿彩国际时时彩平台| www.527600.com-黑彩平刷-| www.621499.com-甘肃快三电视模板| www.692664.com-趣彩彩票手机购彩| www.773047.com-可以玩厘的彩票平台| www.869308.com-彩票密码破解| www.951176.com-张路最新足彩分析| www.998805.com-中国彩三b开奖结果| www.jy5.cc-江苏快三开奖遗漏| www.px92.com-数字彩票-| www.02by.cc-彩票微信群名字大全| www.70xt.com-彩71下载app| www.1329.wang-做黑彩代理怎么样| www.8815.vip-阿狸彩票-| www.72833.cc-广西十分彩必赢技巧| www.033106.com-互联网彩票开放时间| www.111195.com-火炬彩票提现不了| www.180072.com-江苏快三彩票网站| www.252127.com-旺彩官方-| www.321880.com-万能彩票中奖软件| www.391848.com-星耀国际彩票28| www.557242.com-水彩画入门-| www.7dw.com-中国红彩票规则介绍| www.022747.com-安卓版约彩365| www.594118.com-七彩网红桥-| www.41aw.com-福彩2018休市| www.0204.com-赢彩网是正规平台吗| www.6593.biz-体育彩票nba| www.15580.com-好彩客分分快三技巧| www.58757.cc-福彩积分服务卡| www.027571.com-879彩票-| www.092144.com-彩票游泳481开奖| www.155237.com-胜负彩开奖规则| www.259304.cc-竟彩票计算器| www.331065.com-彩票棋牌大全| www.398248.com-博彩注册送彩金| www.525599.com-时时彩计划大全| www.606833.com-今日福彩3d奖号| www.672632.com-新加坡彩票开奖时间| www.745699.com-大赢家彩票快3| www.811036.com-彩票科学投注法| www.879659.com-快乐五分彩-| www.987240.com-微信彩票扫码兑奖| www.cp475.com-彩票快三怎么玩稳赚| www.kt24.com-上海福利彩票双色球| www.d42.me-特区彩票论坛七星彩| www.29ww.com-画风景画彩铅画| www.948.cm-七星彩中奖规则| www.4778.xyz-测试最近折彩票不准| www.9958.loan-体彩排五谜语| www.61938.com-体彩扑克3奖金规则| www.015865.com-够力七星体彩下载| www.083408.com-智博彩票平台| www.140012.com-彩票公式赚钱真的吗| www.212043.com-中国福利彩票159| www.279375.com-网赚彩票单带计划| www.397476.com-0投资彩票赚钱平台| www.512381.com-秋天彩铅画-| www.578050.com-一分彩开奖记录| www.640558.com-麦久彩票网孟德| www.739797.com-万博彩票下载安卓| www.807326.com-福乐彩28-| www.874745.com-亚博彩票站-| www.956915.com-星彩论坛-| www.997881.com-福彩和制图-| www.cp9770.com-3快三走势图青海| www.mc79.com-旺彩双色球下载安装| www.r35.cc-香港有快三吗| www.38qp.com-福建省体育彩票中心| www.884.in-新浪nba篮彩预测| www.4330.biz-五福彩票最新821| www.8990.com-凤凰竞彩是什么| www.51838.com-牛彩摘采网-| www.89580.com-577彩票网上| www.036263.com-快三怎么买稳赚不赔| www.130790.com-蚂蚁彩票怎么样| www.196166.com-安徽快3爱彩乐网| www.260894.com-竞彩足球任选九| www.325352.com-彩票中奖规则查询| www.391131.com-体彩11选5私彩| www.590366.com-网易竞彩单场| www.657386.com-七星彩制作规律表| www.740043.com-聚彩官网下载| www.802314.com-福彩3d开奖给果| www.868599.com-七星彩第二位杀号| www.947286.com-首尔彩票-| www.987710.com-安装人人中彩| www.cai550.cc-三分快三人工计划| www.ib64.com-福彩网络投注中心| www.wl67.com-体彩票开奖查询结果| www.03bu.com-新浪爱彩双色球杀号| www.61ql.com-福彩3d钱王杀码| www.805.org-彩票开奖查询时时彩| www.4192.cn-南粤风采好彩一开奖| www.8940.loan-七星彩截止时间| www.69762.com-辽宁彩票11选5| www.021332.com-太原体彩店-| www.080348.com-518彩官网-| www.131748.com-2018济南彩礼钱| www.197522.com-快三今天开奖号| www.256517.com-978彩票下载| www.316886.com-福利彩票标志图片| www.373796.com-彩智11选五-| www.535084.com-体育彩票电脑课版| www.606682.com-英国5分彩套路| www.666582.com-彩票连续倍投倍数| www.730233.com-三彩彩票网址多少| www.790041.com-青海省中国福利彩票| www.856938.com-如何开彩票站| www.908685.com-福彩安徽快三网站| www.962489.com-济宁福利彩票首页| 金冠彩票www.c4534.com| www.ss0.cc-中国江西福利彩票网| www.od25.com-七天彩票官方| www.2ng.cc-竞彩可以买几万吗| www.47pj.cc-刚力彩芽街拍| www.252.live-王牌彩票是骗局| www.2975.win-日本彩票哪里查询| www.7793.cm-女人梦见买彩票中奖| www.19896.cc-趣客站时时彩| www.57336.cc-七星彩画规软件下载| www.051905.com-彩票彩宝-| www.121243.com-亿彩票软件安全吗| www.178025.com-贵州快三开奖爱彩乐| www.235428.com-广东体彩-| www.295105.com-快3属于什么彩票| www.353921.com-五百万彩票网真吗| www.409711.com-够力七星彩安卓下载| www.499661.com-韩国有名彩票| www.558147.com-电子游戏平台送彩金| www.615738.com-体彩七位数算法| www.663277.com-3g彩票门户-| www.711861.com-单关足球竞彩推荐| www.772806.com-时时彩怎么买才能赢| www.956431.com-甘肃快三遗漏图| www.989237.com-福彩快三诈骗手法| 七星乐www.535666e.com| www.fr27.com-福彩快3输了一百万| www.sv84.com-7星彩中奖规则和钱| www.05bl.com-彩铅幼儿故事画| www.57vj.com-贵州体彩大乐透开奖| www.421.tv-网络彩票今天开售| www.2846.cm-环彩彩票网平台| www.7158.cn-穆棱八面通七彩影城| www.15896.cc-休彩排三试机| www.49111.com-秒速时时彩假不假| www.85738.com-体彩彩票电子票号| www.027601.com-易彩是不是属于违法| www.089042.com-98彩票登录平台| www.168941.com-江苏快三开奖助手| www.397633.com-体彩每天停售时间| www.505886.com-重庆时时彩网页版| www.563913.com-2020彩票网登陆| www.619271.com-搜索彩票开奖查询| www.674259.com-500高频彩票| www.732691.com-佰万彩票登录官网| www.791264.com-梦见中彩票了| www.839910.com-体彩责任彩票|