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天

知道了
亚洲28 www.759823.com-内蒙古福彩下载| www.62vm.com-西安市彩票店转让| www.2153.xyz-越南彩票今天| www.725971.com-福利彩票中奖说明| www.981740.com-大中华网络彩票| www.sp75.com-铁公鸡彩票规律表| www.91596.com-彩票预测软件有哪些| www.515355.com-七星彩网上怎么购买| www.139550.com-盈彩是真的假的| www.6630.biz-腾讯分分彩五码公式| 大赢家彩票平台www.679957.com| www.ij59.com-新九州彩票-| www.10xu.com-彩票快3手机下载| www.0067.top-福彩1d多少钱| www.320054.com-时时彩单机计算软件| www.649342.com-618彩票手机版| www.761049.com-秒速时时彩计划大全| www.781319.com-鼓励买彩票的句子| www.873137.com-欠债突然中彩票| www.948966.com-购彩app真的吗| www.361755.com-2044彩票官网| www.467484.com-3c彩妆怎么样| www.555460.cc-哪个彩票app可靠| www.5sk.com-英国彩票的税| www.264445.com-手机上玩彩票合法吗| www.360354.com-体肓彩票玩法| www.448981.com-彩票投注站怎么提成| www.539946.com-时时彩前三跨度技巧| www.613815.com-网上怎么兑换彩票| www.685414.com-福彩3d字谜之家| www.763921.com-彩神广东11选5| www.866593.com-什么彩票星期三开奖| www.930877.com-吉林省体彩11远5| www.lr37.com-百姓彩票会员注册| www.w42.com-好彩频道回放| www.110002.com-王牌彩票是否正规| www.217562.com-安徽快三今天推荐号| www.304067.com-甘肃福彩体彩| www.381058.com-汪亮解彩票事件| www.505937.com-彩票弃奖黑幕| www.587769.com-近期彩票中奖号码| www.673298.com-彩票这期开什么号码| www.778996.com-合肥福利彩票快3| www.874483.com-老谢说彩19026| www.se69.com-重庆时时彩代理注册| www.850601.com-快三杀号的计算器| www.bn92.com-有没有好的彩票平台| www.07ws.com-体育彩票排3试机号| www.218408.com-彩票幸运农场秘诀| www.57253.cc-彩77苹果版-| www.450045.cc-梦到棺材该买彩票不| www.603896.com-中彩网评论-| www.719028.com-比喻彩虹像什么| www.622772.com-福彩3d杀号软件| www.664626.com-七乐彩摇奖视频| www.041744.com-16亿美元彩票| www.110906.com-彩票软件下-| www.265217.com-新昌双彩规划| www.447401.com-众彩网靠谱吗| www.670818.com-3地彩票走势图| www.77196.cc-中博彩票-| www.033820.com-神彩网24码-| www.8146.biz-三d众彩网专家预测| www.49787.com-外围彩票app| www.679927.com-巨龙彩票网址| www.780466.com-nba篮彩吧-| www.py05.com-7072彩票-| www.96ej.com-钱龙博亚彩票网站| www.8803.pw-彩票预测哪个好| www.681216.com-买七星彩赚钱骗局| www.834787.com-好彩四色宝珠| www.912775.com-欢乐彩票-| www.984932.com-彩神大发云-| www.de40.com-达人彩票是真是假| www.cp8011.com-广西快三遗漏| www.on08.com-管家婆彩图-| www.791842.com-梦想彩票站网址| www.868388.com-七星彩值-| www.968428.com-英国三分彩票| www.1950.shop-龙虎彩票图片| www.91ei.com-辛运彩票直播| www.539777.com-彩票后三跨度怎么玩| www.192796.com-韩国彩票网-| www.299721.com-冠彩网下载-| www.56430.cc-福彩有哪些高频彩种| www.230734.com-11选5购彩-| www.814110.com-新浪爱彩江苏快3| www.901148.com-彩票数学知识| www.969680.com-快三赢钱-| 博友彩www.442428.com| www.173279.com-福彩3d字谜-| www.04155.com-909彩票下载安装| www.53629.cc-时时彩万能码使用| www.026456.com-808福彩合法吗| www.513762.com-体彩小程序破解| www.667365.cc-马来西亚快三开奖| www.233719.com-e球彩可以包四场吗| www.310731.com-体彩过户流程| www.50nb.com-快三怎么预测| www.720044.com-七星彩怎么算能中奖| www.41670.com-重庆福彩开奖号码| www.563604.com-q彩网网页登录界面| www.431518.com-瑞彩祥云是什么| www.71un.com-七星彩赔率-| www.2039.cn-青岛福利彩票中心| www.8286.org-南昌彩票一等奖| www.26009.com-雨后彩虹代表的意思| www.60866.com-河北省彩票中心地址| www.872700.com-彩票迷-| www.952476.com-彩票验奖app| 500彩票网www.08299.com| 818合彩www.www.1555hc.com| www.197102.com-乐和彩网首页| www.262398.com-皇都彩票登陆| www.262113.com-体彩足球竞猜比分| www.388012.com-腾讯分分彩胆码公式| www.24zz.com-派彩和返水-| www.655526.com-中彩网3d和值走势| www.yb97.com-江苏快三派彩网| www.855764.com-七乐彩兑奖号码表| www.917282.com-网易彩票走势图| www.973637.com-彩票能折吗-| 天天中彩票www.867865.com| www.043015.com-七星彩开奖结论坛| www.131112.com-环彩网appios| www.206292.com-网易彩票是正规的吗| www.14wm.com-结婚因为彩礼分手了| www.024934.com-95彩票是不是骗局| www.523725.com-时时彩后二预测软件| www.51101.com-风彩彩票一直初始化| www.au13.com-彩票玩法规则| www.55oy.com-陕西体育彩票app| www.2030.cm-体彩单式票什么意思| www.6qp.cc-员工年后领彩票中奖| www.274177.com-时时彩软件平台| www.347649.com-306体彩苹果下载| www.59758.com-微彩点播iso| www.954766.com-彩票黑客团队| www.rk8.com-大发快三彩票骗局| www.xa20.com-福彩网网址-| www.23vl.com-234好彩票-| www.298011.com-人人彩票怎么玩| www.457342.com-买彩票的打油诗| www.2031.vip-大乐透河南体彩网| www.008290.com-7乐彩开奖号码| www.693923.com-怎么创建快三网站| www.vx52.com-时时彩百位杀号法| www.9929.in-希望彩票app下载| www.28916.cc-搜索安微快三| www.798992.com-专打竞彩让胜| www.860371.com-亚洲杯体育彩票玩法| www.922770.com-彩妆店名字大全| www.971400.com-体彩大乐开奖查| 500万彩票www.96386l.com| www.362142.com-彩票烂了怎么办| www.469646.com-彩票公司电话是多少| www.4377.vip-彩01下载安装| www.134336.com-广州哪有好彩烟| www.962440.com-体彩杀码定胆今天| www.502101.com-阿里彩票的提现时间| www.572638.com-时时彩独胆在线计划| www.637267.com-彩虹桥图片-| www.796347.com-尊彩网安全吗| www.155360.com-足彩几种玩法投注|