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.29692.com-易彩集体app下载| www.233231.com-贵州彩票快3| www.397002.com-天天好彩票开奖| www.ci0.com-福彩在线是骗局吗| www.dx87.com-福建体彩网走势图| www.ck19.com-彩界联盟网址多少| www.1447.vip-公安部打击网络博彩| www.307599.com-派彩电视怎么下载| www.13de.com-山东福彩免费下载| www.789673.com-六六红彩投注靠谱吗| www.880281.com-新浪彩票网电脑版| www.62de.com-nba篮彩赔率分析| www.029536.com-萬城彩票-| www.7152.loan-龙岩七彩艺校| www.000669.cc-多彩网怎么下载安装| www.627.gg-彩票佣金-| www.ao31.com-贵州省福彩中心电话| www.881034.com-人人平安彩票靠谱吗| www.ff99.com-免费湖北快三计划| www.790779.com-彩票智能选号软件| www.pi09.com-足彩19050推荐| www.264168.com-彩票10个数字规律| www.507113.com-易点福彩手机版| www.954272.com-皇家时时彩宝典安卓| www.fo39.com-浙江体彩6十1| www.9516.biz-天彩计划软件| www.232987.com-百彩乐-| www.336333.cc-福利彩票中心开机号| www.211863.com-玩时时彩会坐牢吗| www.781.biz-抖音小方框彩虹图片| www.578621.com-时彩平台充值漏洞| www.427264.com-足彩爱美人微薄| www.866439.com-昨晚彩票开奖号码| www.977311.com-河北体彩任七遗漏| www.io19.com-足彩对阵表-| www.28iv.com-时时彩翻倍追号方案| www.3868.org-福彩快3下载| www.09799.cc-山东彩沙龙论坛| www.0944.me-彩票合买搭建| www.343341.com-必中彩票首页| www.69387.com-福利彩票多久过期| www.074727.com-旺旺彩票靠谱吗| www.330409.com-福彩快三今天预测号| www.350060.com-河南体彩兑奖电话| www.632666.com-云南七彩捞腌菜| www.4093.cm-600w彩票网官方| www.38587.cc-大奖彩票官方网站| www.678312.com-乐彩论坛手机板| www.837538.com-立彩佳美缝剂多少钱| www.918600.com-彩票77是黑彩吗| 九州彩票www.www.6769a1.com| www.tg01.com-做彩票平台-| www.62qk.com-天天中彩票实名不了| www.03532.com-香港49彩-| www.601624.com-稳哥七星彩预测| www.9637.xyz-广州万彩-| www.319560.com-福利快三下载安装| www.448991.com-国内专业的高频彩种| www.015319.com-巨丰彩票5070| www.582488.com-彩票快三开决记| www.149492.com-优信彩票邀请码谁有| www.2ch.com-体育彩票输了| www.144638.com-福彩三d赵公明| www.281224.com-中体彩网开奖| www.370499.com-彩票群为什么会封群| www.536478.com-黑龙江体彩月销量| www.626190.com-福彩双色球红球三分| www.700434.com-体彩如何网上购买| www.320744.com-七星彩机选投注| www.464346.com-体彩什么时候开卖| www.326944.com-体育彩票开奖结果图| www.720234.com-彩票带单套路| www.643726.com-618彩票怎么看| www.754519.com-中彩网双色球擂台会| www.879895.com-安徽福彩新快三| www.989328.com-彩店818怎么下载| www.ve89.com-棋牌彩票一体平台| www.654234.com-福利彩票时间| www.860039.com-彩票网站出租| 500彩票www.50080f.com| www.c64.online-山东彩票群英会| www.54kj.com-开彩开彩-| www.586048.com-彩票注册送18软件| www.s63.vip-体彩排列三金胆| www.sl23.com-河内时时彩官网开奖| 凤凰彩票www.77803t.com| www.34ty.com-306彩票注册网址| www.952647.com-78彩票app官网| www.bs83.com-时时彩缩水软件在线| www.8ov.com-正版资料牛蛙彩票| www.542929.com-查询福彩开奖号码| www.456760.com-今期买马彩图片65| www.470506.com-外国有足彩吗| www.967643.com-百合男骗局彩票| www.cai520.com-中国最大的快三平台| www.812159.com-3d福彩贴吧-| www.161710.com-那有香港行政快三玩| www.698727.com-彩票在线计划网| www.024823.cc-澳门三分彩开奖结果| www.362621.com-3d彩票分几种类型| www.351112.com-南方双彩网走图首尔| www.525308.com-今彩票开奖结果查询| www.890892.com-比较好的彩票app| www.969744.com-网上购彩平台有吗| 新盈彩www.xinyc2.com| www.96981.com-足彩外围风险大吗| www.99924.com-幸运168彩票| www.422888.cc-荣誉彩票犯法吗| www.540858.com-159竞彩版-| www.627959.com-上海褔彩11选5| www.683869.com-推店彩票app下载| www.757948.com-3亿彩票中奖| www.811997.com-福彩3d最小值振幅| www.878788.cc-体彩竞彩5808万| www.964393.com-竞彩彩票app下载| www.cp6770.com-下载快三技巧| www.pl44.com-彩票投注兼职骗局| www.430068.com-水彩笔套装-| www.618938.com-昭通彩票中奖者| www.690157.com-竞彩足球魔方| www.763817.com-彩神大发预测| www.831227.com-三月份足彩-| www.888397.com-爱尚彩靠谱吗| www.958301.com-体彩七星彩下期预测| 易彩集团www.25688j.com| www.3234.in-彩票微商-| www.ag91.com-河南体育彩票481| www.sh49.com-老彩票app-| www.6hs.com-中国足彩分析| www.691773.com-77彩票网app| www.778306.com-彩乐园ⅱ网址| www.844321.com-福彩部门与慈善部门| www.898412.com-银海彩报-| www.954292.com-六彩免费彩票大全| www.998204.com-体育彩票七位数预测| www.av42.com-往期彩票-| www.sc01.com-凤凰彩票官网网址| www.735400.com-彩票本金方案图片| www.kp66.com-江苏体彩中心电话| www.08zh.com-福建省彩票网| www.78ql.com-彩乐网高手网福中网| www.2702.cn-v8彩票是黑平台吗| www.21955.com-87体彩app-| www.281522.com-时时彩和值看号经验| www.260056.com-快三彩票计划| www.175936.com-玩彩票长期赢的办法| www.277349.com-江苏彩票平台登录| www.387932.com-七星彩17153期| www.575416.com-久久彩票下载地址| www.21816.cc-送彩金88-| www.96241.com-福彩千亿案件| www.143599.com-彩运8官网登录| www.056368.com-合肥体彩中心地址| www.8836.cc-彩票狂人众筹| www.fa96.com-爱彩乐彩票网安全吗| www.166386.com-河南快三走势图| www.065375.com-必赢彩票-| www.71702.com-福彩3d评论动态| www.021669.com-中国彩吧图谜第一版| www.083917.com-彩70下载-| www.804179.com-福彩1d技巧-| www.02iy.com-体彩排列五结果查询| www.zp.cc-银川彩票中奖| www.719849.com-苹果原彩显示|