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.44055.com-排列三试机号彩吧网| www.771492.com-时时彩五星单式漏洞| www.676.hk-彩票多少钱需要交税| www.007425.com-广西快三研究| www.449043.com-宁夏双色球开奖彩民| www.560025.com-3d字迷双彩论论坛| www.657526.com-今晚福彩三d开奖号| www.984775.com-体彩大乐透模拟选号| www.ui5.cc-百宝彩票下载| www.sy34.com-七星彩如何算| www.580922.com-彩票平台源码好不好| www.992137.com-时时彩计划定位胆| www.cn39.com-天天彩票天天彩开奖| www.172676.com-贵州福彩宝贝| www.282923.com-七星彩今日几点开奖| www.367960.com-大众彩票网app| www.478228.com-有综艺福彩吗| www.563665.com-狗万是什么彩票软件| www.644661.com-七乐彩规律与技巧| www.722161.com-黑龙江福彩二十选八| www.802147.com-至尊快三合法吗| www.cp1248.com-江苏快三计划稳定网| www.651373.com-北京速开彩官网| www.733384.com-福彩3d预测汇总| www.yi24.com-百宝彩大乐透走势图| www.729936.com-二分彩票查询| www.141521.com-北京快三是骗局吗| www.5yp.com-牛赑彩票官网| www.785543.com-彩票守号概率高| www.899811.com-彩83app苹果| www.970304.com-福彩三d试机号儿| 大赢家彩票平台www.927320.com| www.69803.com-海南彩票信息平台| www.35dj.cc-南国彩票808| www.541286.com-四级彩票-| www.879986.com-彩友玩啥-| www.983204.com-哪里可以下载盈盈彩| www.yh22.cc-彩73彩票领导者| www.73yv.com-彩哥哥软件停运了吗| www.al99.cc-旧版够力七星彩奖表| www.xa96.com-一定牛河南快三预测| www.9142.net-七乐彩旋转阵矩| www.247273.com-彩票站卖快三黑彩| www.358172.com-中国芸彩数字心理学| www.148819.com-河北快三冀彩宝| www.290520.com-怎么用手机买彩票| www.86ij.com-体彩八喜规则| www.350402.com-福彩门户资料大全i| www.381785.com-肥城彩票中3个亿| www.545354.com-中彩一家大乐透| www.675581.com-36σ全国彩票开奖| www.686097.com-七星彩梦册查奖号码| www.824690.com-体彩大乐透机选投注| www.929373.com-七星彩时间开奖时间| www.cp3801.com-如何破解快三买下期| www.718658.com-彩虹七色的寓意| www.866302.com-手机买彩票官方网站| www.967545.com-河南彩民中奖| www.5qs.com-竞彩要交税吗| www.50228.com-送28彩金的彩票| www.109619.com-重庆时时彩挂机工具| www.182906.com-彩票开奖湖北快3| www.968615.com-谁有时时彩微信群| www.8068.loan-名家水彩花卉| www.181905.com-华夏彩票-| www.347568.com-吉彩网是正规的吗| www.139003.com-三的天天彩-| www.167392.com-河南快三基本走势图| www.282205.com-时时彩个位杀号宝典| www.751912.com-1号彩票网址| www.896269.com-2017彩票合买群| www.dl88.cc-代人玩快三是骗局吗| www.k60.top-掌上购彩七天彩下载| www.61st.com-莲湖福彩转让| www.439.bid-福彩3d往期结果| www.648803.com-官方彩票彩种| www.718536.com-彩虹歌词曲-| www.333574.com-彩票可以作为赠品吗| www.128598.com-双色球杀号定胆唯彩| www.91679.cc-58彩票计划网| www.jn26.com-彩票帮投兼职可靠| www.1323.org-网上七乐彩票下载| www.016543.cc-彩票360免费下载| www.7634.cm-荣耀彩票是正规的吗| www.969629.com-乐乐彩票开奖| 500彩票www.327477.com| www.fe10.com-快三赚钱是不是骗局| www.wp55.com-中彩软件app| www.086687.com-神彩福牛双色球专栏| www.143011.com-彩虹网彩票网合法吗| www.208917.com-快彩中奖助手下载| www.268080.com-彩民彩票电脑版| www.5199.vip-重庆体彩中心在哪里| www.ik87.com-中国福彩网下载安装| www.48166.com-哪个彩票网站能买| www.339549.com-福彩彩三地字谜| www.426656.com-手机投注足彩app| www.168040.com-快三网站是真的吗| www.391908.com-腾讯旗下彩票软件| www.164486.com-官方彩票网站有那些| www.291780.com-乐彩大乐透手机论坛| www.679357.com-博彩送彩金可提款| www.627028.com-500w彩票钟洁| www.255061.com-重庆事实彩开奖结果| www.473036.com-福彩属相开奖| www.307038.com-玩彩票三期防挂软件| www.283726.com-彩票一般是几位数| www.th53.com-时时彩一星倍投表| www.52hp.com-手绘森系水彩图片| www.658178.com-彩票投注站用电视| www.223430.com-顶呱刮彩票官网| www.260002.com-宁夏福彩中心| www.89341.com-顶级彩票客户端| www.17963.com-捷豹彩票大本营团队| www.432606.com-福彩高频彩是啥| 福彩网www.60007c.com| www.zl02.com-体彩nba篮球竞猜| www.753845.com-709彩票多少年了| www.947686.com-贵州体彩网排列三| www.cai056.com-一分快三怎么玩| www.re51.com-上海快三3两同号| www.280615.com-彩票查询时时彩开奖| www.540062.com-古风女背影彩铅画| www.698098.com-k彩平台是合法的吗| www.08555.cc-下载福利彩票和安装| www.79498.com-重庆彩票投注网站| www.097756.com-内蒙古快三微信群| www.027152.com-体育彩票销量下降| www.397481.com-赚彩票佣金-| www.365195.com-港彩投中心-| www.505349.com-博彩王要注册吗| www.568006.com-恩施七彩野山鸡养殖| www.647800.com-生肖彩开奖结果查询| www.701698.com-福利彩票手机版本| www.765442.com-什么彩票台子反水高| www.820276.com-体彩客服主要做什么| www.303079.com-好彩三中奖规则| www.477784.com-香港118彩票网| www.636331.com-彩虹织机教程冰淇淋| www.791206.com-彩票数字分析仪| www.907980.com-哪个网站可以打彩票| www.987121.com-福彩快三海南| www.pf25.com-河北快三豹子号推荐| www.3984.cn-449cc天下彩| www.019394.com-毕节大乐透中彩票站| www.829646.com-彩票资料app下载| www.038158.com-爱投彩票苹果下载| www.230703.com-彩71彩票-| www.121298.com-彩票双色球开奖公告| www.207658.com-彩票快三预测软件| www.39bz.com-中国体彩网彩票| www.98df.com-蓝色炫彩壁纸| www.297666.com-快三能在手机上买吗| www.357116.com-彩票归属-| www.55660.com-体彩排列五玩法技巧| www.93843.com-什么是责任彩票| www.r11.shop-体彩买一注多少钱| www.101671.com-澳客彩票网官方端口| www.455564.com-买彩票欠债劫公交| www.531994.com-彩之王是什么花| www.cai1822.com宁夏快三在线开奖| www.752212.com-快三微信群大小单双| www.930094.com-竞彩过关玩法| www.ca39.com-下载天天彩票|