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.203334.com-彩神3app-| www.796883.com-竞彩强胆推荐| www.738325.com-国彩的网址登入| www.135958.com-网上买彩票500网| www.219384.com-福建省福利彩票| www.300036.cc-七天彩注册邀请码| www.784305.com-众购彩票网网址| www.fs11.com-快三对几个号中奖| www.687717.com-3d彩票-| www.608844.com-秒速赛车荣鼎彩| www.022.tv-内蒙古体彩网双色球| www.055057.com-彩色方块消消看| www.642621.com-三彩女装正品旗舰店| www.763766.com-足彩加官网app| www.99ds.com-体彩36选七开奖| www.761720.com-彩票之家网址| www.yu98.com-山东省体彩兑奖流程| www.47vx.com-卖福利彩票书的| www.1798.cc-中国合法高频彩| www.55786.com-七乐彩规则怎么玩| www.042567.com-福彩藏机图谜汇总| www.242428.com-湖北红快三开奖结果| www.366307.com-天中图库彩搜网| www.39681.cc-香港百彩网开奖结果| www.017212.com-体育彩票店几点关门| www.129233.com-购彩票软件哪个好用| www.2643.vip-淘彩票彩种| www.44999.com-特彩网中彩网| www.92gl.com-百万彩票是真的么| www.566678.com-凯发彩票骗局| www.669005.com-注册彩票-| www.8507.top-竞彩可以投资么| www.15368.cc-彩库宝典官方版下载| www.330541.com-吉林快三群96群| www.464863.com-足彩跟庄家买| www.559704.com-彩宝彩票可靠吗| www.656588.cc-彩票机转让北京| www.734266.com-五分快三今天的| www.as81.com-湖北一定牛精彩十分| www.018957.com-今晚福彩三地开奖号| www.035616.com-彩神计划破解版下载| www.vd18.com-江苏省福彩3d结果| www.1020.org-开机号近十期利彩| www.47574.com-山西省体彩中心地址| www.422360.com-彩票每天充值送彩金| www.605210.com-机选彩票中奖概率| www.835553.com-体彩软件排行榜| www.186819.com-时时彩开奖结果表| www.16an.com-体彩手机投注可以用| www.rt14.com-五福彩票苹果版下载| www.wd67.com-甘肃省福彩-| www.538987.com-安彩李留恩现状| www.7598.com-淘宝彩票世界杯赔率| www.255705.com-快三怎么买和值| www.315370.com-a7彩娱乐登录注册| www.967412.com-网上能买彩票么| www.778003.com-汇彩网网页登录| www.931768.com-体育彩票万能公式| www.15qp.cc-福彩对联-| www.5469.top-彩虹岛w国服| www.050130.com-体育彩票奖金计算器| www.251792.com-7168彩票-| www.87400.com-马云写的彩票号码| www.054880.com-创彩网是真的吗| www.144350.com-名爵时时彩平台网址| www.545155.com-彩票讲堂女主持人| www.156.in-彩虹又叫什么名字| www.619967.com-彩票业是不是邓家的| www.170345.cc-快三顺口溜-| www.312622.com-彩票一元购-| www.489985.com-泊利娱乐时时彩| www.571533.com-广西快三堆荐号码| www.300053.com-256买彩票app| www.267175.com-彩皇网-| www.2253.com-今天安徽快三开奖| www.58194.com-江苏省快三遗漏数据| www.090862.com-网易彩票中奖| www.56562.com-彩票一般买几注| www.974466.com-福利彩票七星彩规则| www.771736.com-澳洲国际时时彩| www.964403.com-500竞彩足球比分| www.52nn.cc-跟大奖快三有技巧| 500彩票www.50064g.com| www.l18.cn-彩票棋牌游戏| www.559228.com-通辽体彩发行中心| www.217397.com-下载快彩助手| www.779317.com-天天彩票应用| www.559346.com-包头彩票中心| www.496708.com-网上帮别人投注彩票| www.580254.com-彩票数字随便选吗| www.657099.com-360彩票比分| www.722199.com-彩铅家居画图片大全| www.800138.com-体彩任五开奖结果| www.873082.com-时时彩中彩票| www.936888.com-七乐彩胆拖中奖规律| www.982621.com-福彩3d兑奖有效期| www.ha41.com-重庆时时彩诈骗案件| 幸运彩票网www.33598y.com| www.967425.com-鼎盛彩票微信号| www.ex00.com-助赢彩票-| www.a25.net-福彩正方形标志图片| www.237640.cc-彩票站有北京快三么| www.318496.com-福彩燕赵风采排列7| www.0lt.com-乐彩网是什么| www.2002.love-顺发彩票登录网站| www.09646.com-拼搏在线彩票网| www.77175.cc-一般买彩票买几柱| www.071767.com-中国彩票发展趋势| www.688603.com-发彩票短信-| www.4789.mobi-福福建体育彩票网站| www.483910.com-好彩堂马会现场结果| www.566878.com-彩虹六号nokk| www.892701.com-01彩票手机-| www.960742.com-一分时时彩刷反水| 彩61www.018916.com| www.ix71.com-河北了快三走势图| www.xk00.com-提前预测吉林快三| www.2610.vip-乐购彩网站-| www.8422.in-708彩票下载| www.566382.com-体彩任九开奖金额| www.wu90.com-七乐彩预测推荐号码| www.27mq.com-彩票天天抢红包下载| www.7244.org-儿童彩虹画-| www.22257.cc-网彩平台大全| www.018802.com-足彩加下载-| www.101503.com-19031体彩-| www.rx78.com-快三的复式投注法| www.8730.in-彩票查看中心双色球| www.80200.com-体彩大乐透选号方法| www.110131.com-乐透啦彩票跑路了吗| www.956092.com-玩彩票如何控制心态| www.cp2918.com-快三高手传授经验| www.2080.vip-乐彩33软件下载| www.26697.cc-七星彩复式怎么玩法| www.796152.cc-爱看彩彩票论坛| www.88418.cc-澳洲强力球彩票| www.761469.com-笑脸常开好彩自然来| www.937098.com-七乐彩彩票中奖查询| www.bm76.com-彩票大小单双玩法| www.19di.com-网上代买彩票违法吗| www.2033.cn-网上购彩正规平台| www.17vq.com-快三三不同全买了| www.799566.com-乐彩论坛3d胆码| www.139340.com-如意彩票网-| www.49266.com-买重庆时时彩的技巧| www.5486.xyz-彩虹六号本子百度云| www.906037.com-澳门彩票全部彩种| www.104553.com-比好彩香烟还贵的| www.255030.com-凤凰时时彩app| www.415420.com-彩掌柜app下载| www.332769.com-中彩网专家杀号| www.056498.com-合肥齐豪快三走势图| www.23286.cc-内蒙新快三走势| www.65678.cc-江苏快三选号图| www.59vf.com-单注彩票上限| www.024726.com-99彩票平台登录| www.160950.com-七星彩彩版统计| www.219634.com-55125中国彩吧| www.279004.com-河南褔利彩票| www.326672.com-七星彩预测安然| www.825633.com-私人彩票犯法吗| www.pv01.com-98c彩票-| www.015640.com-七星彩票开奖表| www.798684.com-盛世彩票手机|