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.210071.com-买彩票app-| www.219417.com-新华网互联网彩票| www.891252.com-最幽默的彩票广告语| 彩票宝www.2cpb.com| www.45155.cc-指望彩票中奖| www.0328.com-查找附近体育彩票店| www.056330.com-七星彩三个号多少钱| www.973311.com-fc彩虹岛-| www.j66.me-深圳福彩发行中心| www.967662.com-彩芽的好奇心| www.u50.net-查询丹东3d彩图| www.772229.cc-中博在线买彩票| www.111473.com-彩票战狼挂机计划| 博友彩www.912273.com| www.952546.com-广东好彩2开奖结果| 500万彩票www.98528f.com| www.mu19.com-旺彩3d软件下载| www.518314.com-时时彩输了能上岸吗| www.9349.biz-福利彩票被逮事件| www.297760.com-河北快三和值玩法| www.444925.com-百乐彩有什么技巧| www.560503.com-福彩3d大胜赛字谜| www.639741.com-牛牛彩票怎么玩法| www.725700.cc-彩票兑奖有效期多久| www.797954.com-体彩11选择5秘密| www.879957.com-内蒙古体彩中心位置| www.952314.com-千里马彩票预测软件| 500彩票www.26299h.com| www.pq26.com-竞彩猫官网-| www.11591.cc-福彩双色球机选号卜| www.927807.com-彩票306安卓安全| www.3976.biz-各大城市结婚彩礼钱| www.42gq.com-3d唯彩看球预测| www.1417.in-福彩机选号码在线| www.249044.com-6234彩票-| www.241415.com-彩虹是怎么形成的| www.027384.com-正规的高频彩种| www.111708.com-太阳彩票app| www.05610.com-义乌福彩中心| www.5vq.com-想举报网络买彩票| www.8168.com-七星彩吹吹圏| www.13xm.com-福利彩票二等奖奖金| www.3228.pw-体彩竞彩足球直播吧| www.941325.com-体育彩票七位数唯一| www.il8.com-内蒙古快三玩法规则| www.705698.com-东莞体彩兑奖地址| www.574200.com-360购彩助手| www.738727.com-天津自助福利彩票机| www.871613.com-金利彩票骗局| www.cai6783.com极速快三开奖号码| www.517235.com-中彩堂网开奖| www.792520.com-铜陵市福彩兑奖中心| www.920800.com-七彩彩票-| 3G彩票www.c133.vip| www.733817.com-彩票新规影响| www.216725.com-华彩快三网-| www.412996.com-约彩365店家版本| www.731084.com-易彩快三预测| www.914200.com-凤凰彩票交流群群号| www.799993.com-福彩開獎結果| www.978900.com-双色球彩票资讯| www.996727.com-黑龙江省体彩官网| www.wm53.com-彩8下载app注册| www.930.com-青海快三走势图昨天| www.276677.com-菲律宾彩票客服| www.367360.com-彩铅花卉简单的| www.831780.com-怎么建立彩票app| www.m66.top-彩票一般是买几个数| www.29ry.com-竞剩足球彩客网| www.810.date-彩宝贝彩票杀号定胆| www.212201.cc-快三三不同号计划| www.285611.com-重庆时时彩胆拖玩法| www.710.tv-怎么买篮球彩票| www.672122.com-三d风云彩票a版| 梦想彩票www.33112e.com| www.9504.cn-美国彩票实名制吗| www.9774.in-快彩技巧-| www.2796.cc-彩票怎么买图片| www.43311.cc-时时彩后三跨度玩法| www.91020.com-豹赢彩票下载安装| www.6695.top-福彩代打是什么| www.37317.cc-俄罗斯彩蛋-| www.000457.com-时时彩盈利25万| www.637167.com-彩虹六号冠军| www.713561.com-领航彩五分快3| www.782881.com-福彩1分快3-| www.857282.com-彩之源彩票如何赚钱| www.933793.com-什么app能买足彩| www.979361.com-好彩香烟盒-| www.cs92.com-网络黑彩大案| www.sw24.com-我要机选七星彩| www.270758.com-鸿彩快三彩票推荐码| www.869683.com-幸运彩票多少人输过| www.359621.com-冠军宝宝体彩断组| www.217724.com-幸运快三稳赢方法| www.321092.com-快3彩票程序| www.397734.com-七星彩2280期杀| www.521826.com-新星彩靠谱吗| www.297972.com-福彩快3图片| www.ot37.com-手机上玩彩票合法吗| www.32df.com-云上多彩宝-| www.0411.date-彩票帮助赢软件| www.xk8.com-大发彩票app平台| www.126317.cc-手机版下载8号彩票| www.271667.com-好彩1几点截止投注| www.385912.com-精彩音乐汇2015| www.543279.com-彩尊领奖有节假日吗| www.762157.com-竞彩足球分析app| www.883627.com-辽宁快乐12爱彩乐| www.984349.com-竞彩猫充值-| www.bm79.com-福彩30万都是托| www.xr87.com-大透乐彩票开奖结果| www.50pw.com-今天七星彩开公告| www.1722.cn-掌上赢彩官网| www.8982.pw-请进入精彩内容搜狗| www.739138.com-3d彩票模拟投注| www.868632.com-七星彩43-| www.948321.com-彩吧论坛天齐网首页| www.cp784.com-玩快三的app全部| www.733259.com-彩票被洗衣机洗烂了| www.330483.com-诺亚彩票app| www.396141.com-聚星彩票客户端下载| www.790376.com-彩票伪随机数| www.u46.com-选彩票软件下载| www.08911.com-福彩3论坛手机版| www.9304.xyz-东北彩票网东彩网| www.434896.com-彩29苹果版下载| www.571050.com-彩票歌曲-| www.649134.com-七彩椒几月播种| www.707653.com-足彩任九复式计算器| www.777076.com-时时彩倍投骗局| www.901665.com-打黑彩坐庄怎么处罚| www.858904.com-多赢吉林快三| www.971447.com-卓易彩票苹果| 幸运彩票www.912199.com| www.221587.com-520彩票下载| www.393996.com-福利彩开奖结果昨天| www.538136.com-国彩项目是什么意思| www.602322.com-注册送礼金彩票网站| www.667795.com-彩票高官落网| www.731622.com-彩票最佳网投平台| www.803557.com-49.cc金彩网站| www.871332.com-最高倍率彩票网| www.970128.com-体彩在线开奖直播| 瑞彩网www.809571.com| www.pw58.com-三分彩开奖网址| www.89mk.com-下载足球竞彩彩票| www.33148.com-福彩3d图谜字谜| www.095903.com-网上彩票代打兼职| www.440822.com-体彩11选五拖胆| www.6017.biz-玩3d彩票最高技巧| www.83ch.com-移动视频彩印| www.3063.cm-朱雀彩票我的账户| www.04561.com-下彩网是真的吗| www.495465.com-香港六和彩票网站| www.567102.com-彩虹画画图片大全| www.635111.cc-爱建七彩影院| www.758924.com-bbin彩票刷水| www.830315.com-567彩票可靠吗| www.895081.com-爱投彩票兼职| www.2ci.cc-彩票店里还能卖什么| www.79eq.com-关于彩票小说| www.959885.com-19号彩票-| 亿发彩票www.802733.com|