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.295000.com-易彩骗局官网| www.506703.com-中国体彩三毛彩图片| www.611118.cc-一分快三倍投方案| www.570628.com-七彩文鸟图片| www.173888.cc-福建快三中奖号码表| www.628342.com-七彩面罩美容仪功能| www.869085.com-彩票密码在哪里看| www.928585.com-福彩十五选五开奖号| www.fi96.com-大发快三团队计划网| www.xu66.com-身无分文也敢买彩票| www.1035.live-搜索三b彩票试机号| www.5734.biz-祥瑞祥运tt快三| www.67268.cc-邢台体彩中心| www.019696.com-网上合法彩票软件| www.40114.com-掌优彩票官网| www.97801.com-足球直播唯彩| www.071938.com-河南彩色沥青颜料| www.142068.com-买2分彩有什么技巧| www.247439.com-上海福彩选4走势图| www.345343.com-山东福利彩票网址| www.494020.com-腾讯二分彩开奖结果| www.615006.com-哪里有卖彩票的地方| www.725567.com-中彩手彩票图| www.882080.com-网上做兼职玩彩票| www.71220.com-十一选五购彩技巧| www.085007.com-天天赢彩票登录| www.172477.com-快三怎么看走势技巧| www.sv.cc-大发快3彩票导航| www.vx11.com-七星彩走势图彩宝贝| www.734511.com-排3最准凤彩网| www.860004.com-500彩票苹果版| www.968940.com-福利彩票诈骗案| www.ip76.com-360足球彩票| www.08jm.com-彩票一号平台| www.47388.cc-好彩3复式-| www.96725.cc-彩票内定-| www.062985.com-福利彩票加盟开店| www.142727.com-官网彩8彩票| www.227372.com-三分快三正规吗| www.303776.com-鑫彩彩票平台| www.377111.cc-e球彩票走势图| www.488391.com-中置福彩无人售票机| www.571886.com-腾讯分分彩中奖结果| www.639570.com-如何卖好竞彩| www.753705.com-搜狗彩票无法提现| www.821661.com-聚彩汇骗人的吧| www.895530.com-彩票那个网站有合买| www.961256.com-大众彩票登陆| 500万彩票www.96386x.com| www.kn37.com-k3福彩官方邀请码| www.a98.cn-各彩种开奖结果| www.35rx.com-今日七星彩试机号码| www.466.win-蚌埠彩票中心| www.3881.vip-体彩兑奖中心在哪里| www.037339.com-号百彩票开奖结果| www.800028.cc-查看福彩票开奖| www.cp154.com-幸运快三彩票平台| www.oo21.com-彩客app老版本| www.08gi.com-彩铅日落黄昏风景画| www.79en.com-福利彩票营业时间| www.2146.org-天天中彩票无法提现| www.8203.cc-辉煌彩票在线| www.34308.com-儿童彩铅画图片| www.73699.com-世界杯彩票哪里购买| www.029103.com-彩票计划客户端| www.307289.com-爱彩乐是合法的吗| www.848850.com-福彩即开型彩票中奖| www.976986.com-玩彩乐-| www.yv02.com-青海快三和值技巧| www.0220.net-三d家彩试机号| www.28995.cc-3d百度贴吧彩票吧| www.028150.com-高频彩彩票投资技巧| www.194344.com-河南福彩幸运二| www.334028.com-私彩快三漏洞| www.526251.com-鸿运彩票登陆网| www.853126.com-澳彩网网站-| www.964022.com-竞彩开奖结果查询| www.lh55.com-中彩彩票zc01| www.34te.com-新闻彩票中奖| www.9586.pw-七星彩票开奖结果查| www.161028.com-网赌248彩票| www.330698.com-七天国际时时彩| www.592563.com-玩彩票输了200万| www.59273.cc-福利彩票网点申请| www.087661.com-体彩云彩店app| www.206159.com-神州彩票是违法的吗| www.443218.com-福彩双色彩球开奖| www.789222.com-彩色压印地坪价格| www.930731.com-马来西亚盛兴彩票| www.13pz.com-福彩3一定牛走势图| www.0235.xyz-福彩计划导师| www.53167.cc-河北福彩排列五走势| www.040007.com-内蒙时彩-| www.272826.com-pc彩票合法吗| www.387680.com-福彩手机怎么购买| www.569232.com-什么彩票注册送钱| www.cai2266.com福彩3d开奖结果| www.31570.com-彩票套利论坛| www.036155.com-彩票大数据app| www.135389.com-竞彩让球赔率| www.240123.com-彩神vl是真的么| www.385271.com-ss456盛世彩票| www.519906.com-鸿彩靠谱吗-| www.634518.com-93彩票网安全不| www.876340.com-时时彩骗局经营模式| www.0322.cm-彩票倍投循环模式图| www.29116.com-万成彩票注册| www.83328.com-彩票民间高手| www.119387.com-8号彩票论坛注册| www.278629.com-五福彩票苹果版下载| www.389411.com-做福利彩票站赚钱吗| www.506991.com-彩票网3d字谜| www.612923.com-乐购彩官网-| www.719616.com-福彩3d报纸图在哪| www.800706.com-手机验证码送彩金| www.594319.com-三思彩玄机-| www.677225.com-彩色包装厂家| www.68535.com-福彩3d综合版| www.030818.com-网上玩彩票是真的吗| www.108578.com-速盈彩票安全吗| www.226925.com-福彩3d乐彩走势图| www.313752.cc-彩票中奖新闻今年| www.400416.com-点击彩平台怎么样| www.509776.com-嘉年华网上博彩| www.648915.com-五彩椒能活几年| www.lv63.com-彩票站每日对账方法| www.01nt.com-羽泉彩虹伴奏下载| www.83sb.com-599彩票靠谱吗| www.37948.com-竞彩网上购彩| www.254373.com-倍率最高的彩票网站| www.39252.com-玩什么彩中奖率高| www.003505.com-说买彩票的幽默话语| www.110904.com-518时时彩链接| www.218733.com-惠民乐彩票钱骗局吗| www.420377.com-中博彩票正规吗| www.586845.com-南方双彩网大乐透了| www.710578.com-彩票套菜什么意思| www.998155.com-玩彩网最新app| www.221879.com-彩票上瘾的症状| www.582387.com-三地012路彩宝网| www.237014.com-360竞彩-| www.559477.com-中彩麒麟双色球| www.93001.cc-红星红彩口杯怎么样| www.292001.com-上海福彩基诺走势| www.603560.com-微信购彩票-| www.59td.com-彩色水磨石图片欣赏| www.8203.cm-中国福彩云南快三| www.097796.com-百度彩票官网| www.933019.com-惠明乐彩票网| www.5224.cm-七星彩精准头尾码王| www.1820.com-依彩化妆品套盒图片| www.9674.org-中囯彩中国彩吧| www.61384.com-仿冒彩票网站最| www.058335.com-粤彩联盟报纸| www.330010.com-香港乐和彩开奖结果| www.768565.com-时时彩爱乐网站| www.890305.com-胜负彩360-| www.982188.com-福彩3d官网新彩网| www.81322.cc-3d黑圣手福彩| www.3260.xyz-买彩票欠款十几万| www.637.cc-彩票中的数学ppt| www.43562.com-福彩一周开几次| www.262537.com-455彩票app-| www.57yd.com-中彩那天教案ppt|