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.6798.cn-红彩会登录手机版| www.ou01.com-彩票显示屏-| www.665014.com-福彩乐透35选7| www.793075.com-邢台福彩中心地址| www.gj5.com-玩时时彩输了| www.309309.com-马来西亚乐活彩开奖| www.508074.com-体彩61玩法介绍| www.685932.com-福利彩票投注软件| www.789723.com-数字竞彩骗局| www.893050.com-彩票中奖秘籍王博士| www.983285.com-体彩竞彩下载| www.kk58.cc-易彩一分钟快三| www.3125.top-体彩中心查询电话| www.79944.cc-腾讯彩票游戏规划| www.4211.in-甘肃快三走势带连线| www.371914.com-中国彩是什么| www.lw0.cc-体彩排列三走势图表| www.0678.net-买彩票在哪里买| www.07774.cc-中彩那天阅读答案| www.70215.com-915彩票-| www.040219.com-内蒙竞彩快三| www.254795.com-重庆实时彩开奖结果| www.711363.com-下载天天福彩app| www.891269.com-福利彩票励志语录| 大赢家彩票平台www.136506.com| www.763758.com-足彩加app苹果| www.086836.com-福彩彩票机缴费| www.447546.com-大吉大利刮刮乐彩票| www.199944.com-腾讯十分彩开奖号码| www.279197.com-腾讯分分彩后三杀一| www.359281.com-59博彩论坛网址| www.919111.cc-买外围网站彩票| www.536674.com-福彩1d中奖多少钱| www.720323.com-河北快三开奖走势| www.633152.com-篮球彩票单场投注| www.106234.com-多赢彩票正规吗| 大赢家彩票平台www.225065.com| www.qv50.com-福彩七加一-| www.666428.com-乐彩站app官网| www.848816.com-皇家时时彩软件| www.943443.com-海南省七星彩规律图| www.83882.cc-在小镇开彩票店| www.100444.com-体彩走势图排列3| www.5004.cm-彩票吉祥-| www.895706.com-辽宁竞彩快三| www.974257.com-环球彩票app| www.zy.com-河北快三走势5跨度| www.004286.com-买了18年彩票| www.082265.com-彩票平台互刷风控| www.153250.com-竞彩网七星彩开奖| www.027072.com-高频彩种哪家好平台| www.117935.com-浙江地方彩-| www.200027.cc-腾讯时时彩开奖公告| www.299646.com-微信六和彩高手群| www.368600.com-福彩3d晚秋字谜| www.127106.com-香港正版福利彩票| www.6738.vip-九龙彩票平台| www.116789.com-彩乐乐杀和值尾| www.173108.com-快三老平台-| www.70327.com-彩票群聊-| www.ih60.com-中国体育彩票竞猜吧| www.cai6088.com江苏快三在线计划网| www.mm42.com-51时时彩计划表| www.58861.com-彩票暴富后该怎么做| www.270260.com-湖北快三预测豹子号| www.397764.com-如何用彩铅画花| www.4326.wang-鑫彩官网-| www.9952.site-云南彩票无人认领| www.5477.top-彩票计划群倍投方式| www.22003.cc-558赢彩能信吗| www.619306.com-火山彩票app| www.719396.com-福彩排列5开奖查询| www.616168.com-609彩票是真的吗| www.65522.com-炫彩意思-| www.c51.org-足球彩票分析网| www.40rx.com-新大陆彩票计划| www.992234.cc-重庆时时彩定位软件| www.qk42.com-中原彩票是真是假| www.775557.com-河北体彩网官网首页| www.982310.com-六福彩香港-| www.711656.com-彩票两元网中奖| www.813888.com-网络彩票输10多万| www.934918.com-福彩3d分分快三| www.av59.com-极速快三计划免费| www.308808.com-万彩吧6合资料| www.412988.com-赛马排位表及派彩| www.748383.com-红彩会手机怎么登录| www.855327.com-中国福利彩票双彩球| www.954851.com-七彩祥云-| 福利彩票www.99677n.com| www.692186.com-3d百位杀号彩乐乐| www.816332.com-博彩诈骗怎样报警| www.12dr.com-怎样网上投注福彩| www.pl52.com-彩色透水混凝土施工| www.11979.cc-乐乐彩计划-| www.163771.com-5080彩票下载| www.742567.com-好彩运88-| www.077010.com-亿元大奖彩票号码| www.89sq.com-重庆时时彩会下架吗| www.463118.com-科彩印务工资怎样| www.305111.cc-体彩足球14场奖金| www.425213.com-彩票平台55倍| www.518535.com-必发彩票网页版登录| www.18ti.com-七乐彩单式几点开奖| www.875156.com-快三技巧稳赚方法| www.bg01.com-五分彩被骗5000| www.838387.com-今天七星彩雪狼十位| www.950702.com-九号彩票登录地址| 500万彩票www.5441f.com| www.630511.com-快三豹子出现的概率| www.8499.net-菲律宾雄伟博彩公司| www.52261.cc-时时彩爱乐网站| www.009409.com-999彩票网合法吗| www.899231.com-福彩快3有赢钱的吗| www.969215.com-8k彩票破解方法| www.wb40.com-冀彩宝站主平台| www.71270.com-大乐透彩票500| www.084615.com-西西彩票ios| www.811205.com-六爻测彩票断决1| www.773793.com-福彩三地试机号金马| www.878131.com-福彩3d全国最大奖| 99彩票www.655802.com| www.383688.com-山西彩票20选8| www.457247.com-关于彩票的句子| www.561830.com-爱购彩票是骗人的| www.645848.com-体育彩票能机选吗| www.775133.com-k彩彩民福路线测试| www.089040.com-休彩排列五走势图| www.166020.com-68彩票真的假的| www.242698.com-彩票倍投陷阱| www.322372.com-廉江好彩哥头尾论坛| www.505984.com-盛彩记账本下载| www.586976.com-双色球购买新浪爱彩| www.300022.cc-福彩手机购彩软件| www.907596.com-七星彩怎么才算中奖| www.977613.com-彩米彩票-| www.dn78.com-中彩票的概率| www.330202.com-电子无需申请送彩金| www.141946.com-如何在竞彩猫上推荐| www.817923.com-彩票排五走势图| www.948297.com-天齐彩吧-| 500彩票www.314577.com| www.111.cm-缤果彩票网-| www.255470.com-中彩吧的骗局| www.338194.com-近期中奖彩票图片| www.438816.com-360彩票预测推荐| www.545654.com-福建体彩公主音乐网| www.599148.com-顶尖的彩票网站系统| www.658188.com-足彩开奖直播现场| www.717037.com-彩色铅笔牌子排名| www.784666.com-官方乐优彩票网| www.844218.com-彩票买的时间| www.898119.com-快三接龙砍龙| www.952342.com-中彩网怎么样| www.987746.com-彩票关停新闻| www.fs8.cc-复式彩票多少钱一注| www.192218.com-200万彩票app| www.309235.com-陕西省体彩中心| www.1489.vip-彩虹的寓意象征意义| www.273494.com-福彩怎么看中几等奖| www.708801.com-1305彩票官方网| www.830687.com-888彩票网手机版| www.904710.com-福彩快3投注网| www.959824.com-澳洲三分彩官网|