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.911156.com-k彩彩富民地| www.19084.com-辽宁福彩双色球今日| www.492818.com-用户登录百家彩娱乐| www.367386.com-星期三开什么彩票奖| www.681269.com-14彩官网-| www.19377.cc-体育彩票去哪里领奖| www.10810.cc-足球彩票大赢家| www.672357.com-福建体育彩11先5| www.481535.com-取消和彩印基础包| www.41030.com-中彩客服可可| www.567572.com-驿站彩票-| www.255010.com-新的时时彩网站| www.4020.cn-彩票捡钱-| www.831788.com-福彩七乐彩开奖现场| www.981148.com-七彩冰淇淋粉| www.la72.com-02彩票app下载| www.14sl.com-安徽体彩开奖时间| www.37588.cc-江苏七位数彩票| www.900933.com-小妮姑玩彩独胆| www.13vh.com-2019清明节彩票| www.610278.com-淘宝如何网购彩票| www.1225.wang-万豪国际博彩邀请码| www.479102.com-足球竞彩开奖公告| www.414855.com-双色球彩票资讯网| www.1776.me-够力七星彩手机版| www.3377.cm-人人中彩票客服| www.132508.com-足彩四串一-| www.215053.com-彩票达人猜一生肖| www.878428.com-福彩3d五行杀号| www.954511.com-牛蛙彩票app| www.cai4443.com河南快三预测今天的| www.805863.com-福彩刮刮乐图片| www.993701.com-竞彩单关历史数据| www.oh72.com-758彩票-| www.6ue.com-和彩这个词对吗| www.93xo.com-众益彩票客户端| www.3738.top-贵宾室彩票下载| www.217206.com-高频私彩app| www.65576.cc-福彩哪个软件好| www.654154.com-128福彩软件| www.455974.com-手机买彩票如何领奖| www.160102.com-上海快三今天开奖| www.605856.com-新q彩网-| www.1281.in-彩票经销商回扣| www.3233.date-彩票双色球凤彩网| www.583579.com-全民足彩彩票下载| www.681350.com-彩票是网赌吗| 500彩票www.330295.com| www.nn25.com-彩票在线选号器| www.900906.com-彩票查询票-| www.967334.com-福彩双色球开将| 大奖彩票www.11djcp.com| www.rw64.com-快三选胆码技巧| www.5397.biz-中国彩吧7-| www.zw45.com-什邡体彩店-| www.771799.com-时时彩腾龙手机官网| www.862377.com-公益福彩彩种| www.927611.com-俄罗斯彩票有哪些| www.982064.com-福彩站点查询| www.no21.com-福彩3d小助手| www.y13.biz-忆彩彩票下载安装| www.301675.com-体彩王滨字迷| www.kf93.com-鸿彩票-| www.31600.com-胜负彩开奖历史统计| www.55pz.cc-体彩俱乐部怎么样| www.lq19.com-中彩网网址是多少| www.q42.me-广西快三购买| www.137055.com-彩7彩票送彩金| www.78fd.com-私彩幕后控制| www.844411.com-石家庄福彩弃奖| www.916116.com-时时彩票注册送彩金| www.972474.com-优彩网app下载| 大赢家彩票www.594611.com| www.gc71.com-福彩排列7开奖结果| www.vh41.com-体彩江苏七位数开奖| www.ia14.com-彩票坊骗局揭秘| www.t06.cc-河南省快三开奖查询| www.65kh.com-浙江省彩票开奖号码| www.2034.in-青岛体彩投注站点| www.927153.com-体彩61开奖结果| www.981330.com-竞彩表格制作| www.hl.com-竞彩血的教训| www.mv45.com-申请福彩代理销售点| www.s29.org-体彩6+1查询| www.58ic.com-易经占卜彩票的方法| www.0609.me-彩票就是买不中| www.5892.site-广东彩礼多少| www.cai8844.com吉林快三开奖结果图| www.pj53.cc-彩票经验-| www.bk54.com-福利彩票快三计划| www.452234.com-太原彩票-| www.53ta.com-彩票百分之八十中奖| www.404136.com-7星彩兑奖查询| www.qp62.com-福彩文化的理念| www.44fd.com-彩之云物业怎么样| www.bu5.com-好彩一生肖数字表| www.026219.com-百姓彩坛-| www.156151.com-好客彩ios-| www.058782.com-中国足彩网官方网站| www.725555.com-私人的体彩赌| www.088921.com-彩吧图谜汇总| www.88611.com-永信彩票app下载| www.062639.com-鸿运彩app-| www.20ue.com-天津体彩下载软件| www.97hg.cc-人生没有彩排作文| www.2790.vip-福彩独胆杀号彩宝贝| www.41uv.com-鸿运彩票资金安全吗| www.dh25.com-彩票达人-| www.q13.net-福彩3d丹东全图谜| www.288344.com-安徽快三和值技巧| www.827608.com-3分彩软件-| www.003894.com-梦想彩票站下载| www.9352.online七星彩大奖是真的吗| www.000142.com-好彩快印-| www.070967.com-易约约彩客服电话| www.808988.cc-买彩票的感慨| www.gh42.com-辽宁体彩网11| www.38.cc-七星彩结局明月珰| www.275342.com-极速时时彩官方开奖| www.540057.com-古风彩铅手绘素材图| www.609151.com-梦见杀人买七星彩| www.679023.com-易彩网一分快三| www.767785.com-体彩中大奖彩票单| www.875758.com-梯子游戏彩票软件| www.973142.com-五彩玫瑰花的图片| www.nl3.com-福利彩票手机版下载| www.fn86.com-精英彩票下载手机版| www.580582.com-七星彩下注-| www.683895.com-宁夏快三app| www.m44.cc-湖北体彩新兑奖地址| www.456822.com-华彩登录网址| www.628128.com-app彩票开奖查询| www.958674.com-彩票年后啥时候开始| www.609275.com-周易解梦七星彩号码| www.696581.com-香港时时彩官网网址| www.764733.com-介绍彩票送彩金平台| www.15wd.com-体彩店成本-| www.77083.com-飞天彩票是真的吗| www.7076.cm-分分彩八码倍投| www.31523.cc-银川千彩摸吧好玩吗| www.1577.vip-多彩贵州集团官网| www.986423.com-今天足彩专家推荐| www.812748.com-福彩3d开奖号漏洞| www.96yf.com-中国福利彩票通知| www.3827.biz-快三走势图怎么看啊| www.795739.com-环球速八彩票| www.030790.com-大大彩票可以玩吗| www.112759.com-福彩3d山东图| www.66kf.cc-彩票长期7码| www.010560.com-彩票怎么注册| www.37899.com-福彩3d多久开奖| www.sp34.com-彩票时时彩开奖时间| www.006812.com-江苏体彩任选3| www.83510.com-千里马阳光彩票登录| www.122452.com-9彩9彩票-| www.444080.com-体育彩票nba玩法| 500万彩票www.96386d.com| www.091613.com-博盈彩票是真假| www.068222.com-福彩3d三角图| www.366071.com-世界上彩铅品牌排行| www.025640.com-一定牛遗漏快三安徽| www.261116.com-彩票驿站邀请码| www.531338.com-彩93ios-| www.hj2.com-安徽快三规则|