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.0395.tv-彩票外围是什么意思| www.6719.top-577彩票苹果下载| www.29333.com-玩彩票wcpcc下| www.19fu.com-买彩票犯法不| www.307844.com-7星彩直播-| www.698844.com-6加1彩票规则| www.312894.com-鑫彩商城app| www.532712.com-七星彩连中4个号码| www.486955.com-足彩中奖怎么去兑奖| www.863501.com-qq有彩票吗-| www.576243.com-开心海南七彩票网| www.73166.cc-湖南福彩兑奖| www.896523.com-派彩手机版吗| www.454888.com-皇冠彩票是真的么| www.563654.com-湖北乐彩快三推荐| www.327342.com-福彩七乐彩专家预测| www.959314.com-竞彩168-| www.1465.xyz-浙快乐彩12选五| www.434040.com-贵州彩民5000万| www.545866.com-易彩堂彩票网址| www.4317.cm-可以买nba的彩票| www.362071.com-全国彩票开奖查巡| www.520961.com-快三组合号有哪些| www.631114.com-胜负彩17014| www.916552.com-竞彩足彩比分500| 500彩票www.50052f.com| www.0520.cn-福彩3d彩票大盈家| www.02188.cc-齐齐彩票-| www.6148.cm-福彩票3d-| www.54177.com-时时彩的最新漏洞| www.599552.com-篮球体彩微信群| www.607506.com-广东福利彩票网官网| www.997757.com-江苏利彩快三群| www.lw89.com-时时彩助赢免费计划| www.012280.com-快三自动-| www.563553.com-q彩是合法的吗| www.382798.com-19035足彩-| www.529398.com-87足彩下载-| www.598546.com-体育彩票的新闻| www.685243.com-彩票软件pk10| www.974393.com-昨天彩票开什么号码| www.as20.com-贵阳福彩官网| www.we99.com-兰州市福彩中心兑奖| www.163595.com-聚彩彩票正规吗| www.083605.com-哪里可以买体彩| www.80ef.com-西宁市福彩中心| www.062475.com-59彩票平台-| www.39446.com-盛兴彩票e乐彩| www.164864.com-广东体彩骗局| www.020687.com-福彩3d精华布衣4| www.113553.com-成都竞彩快三开奖| www.192000.com-湖北快三骗人| www.55pg.cc-云南体育彩票3d| www.375474.com-福彩2019003| www.cp2030.com-快三必中技巧方法| www.854452.com-大发快三骰子下载| www.948027.com-双色球杀号_彩经网| 九五彩票www.95222w.com| www.26ud.com-经营福利彩票赚钱吗| www.1219.in-网易的人人红彩票| www.889594.com-凤凰彩哪里下| www.299076.com-新浪彩票数据| www.635.cm-福彩东湖社区网址| www.936042.com-乐山快三到底真假| www.370144.com-手机彩膜教程| www.099391.com-盈彩国际彩票| www.890489.com-彩29彩票网-| www.ym38.com-彩票对打刷流水赚钱| www.966709.com-福利彩佣金-| www.cp1817.com-快三在线稳定计划网| www.625267.com-苏宁体彩app下载| www.450450.com-288彩票里的快三| www.548234.com-河北彩票中奖故事| www.620155.com-香港马彩开奖网站| www.35940.com-福彩开奖助手| www.4477.tv-印尼分分彩开奖记录| www.19789.com-87彩店下载-| www.030778.com-大大中彩票靠谱吗| www.nv10.com-公务员买彩票受处分| www.54308.com-时时彩刷漏洞真的吗| www.389578.com-体育彩票19032| www.502682.com-多彩投失败案例| www.ex85.com-助赢彩票计划| www.619124.com-新浪彩票首页官网| www.712229.com-因为彩礼谈崩了| www.287.in-七星彩中3位多少| www.284677.com-江西省福利彩票| www.07022.com-好运来彩票站怎么样| www.848928.com-彩世界家园-| www.912337.com-六壬测彩票3d| www.967125.com-福彩3d中奖心得| 500彩票www.202437.com| www.gu31.com-彩77官网下载地址| www.ws12.com-哪些是官方彩票| www.06nx.com-二年级好看的彩铅画| www.76eo.com-全球彩票最新版| www.796333.com-彩尊平台登录| www.913861.com-天下第彩票-| www.998946.com-今日头条送彩票| www.mp12.com-彩票总的有几个数| www.121846.com-山西体彩宝马事件| www.25.me-机选25注七星彩| www.139256.com-68z彩票-| www.556652.com-下期七星彩开奖结果| www.91fb.com-彩票群的包赔计划| www.703116.com-福彩好彩天地报纸| www.857669.com-彩之源怎么看邀请码| www.cp7715.com-红快三开奖-| www.25rv.com-7星彩开奖号码47| www.hw71.com-中国体育彩票怎么样| www.yu68.com-上海快三开奖规律| www.17fh.com-神秘彩票88倍| www.69667.com-福彩三d新彩吧| www.50ai.com-贵州快三统计图表| www.618746.com-永久彩票app| www.705055.com-3d彩票查询-| www.ih73.com-中国体育彩票最新版| www.36268.com-北京快三公交时刻表| www.028151.com-制作彩票软件| www.200075.cc-彩票最快开奖| www.382417.com-梦见火追自己买彩票| www.737323.com-香港好彩网-| www.94sw.com-体彩最大的数| www.706579.com-嘉兴福利彩票阮春| www.788495.com-古建筑彩绘图片| www.904636.com-江苏快三遗漏数据| www.983552.com-幸运时时彩走图| www.cx1.cc-福彩近30期走势图| www.860813.com-内蒙古快三分析软件| www.970564.com-福彩3d开机号码表| 大赢家彩票www.394611.com| www.603625.com-挂机彩票论坛| www.695339.com-竞彩足球合买投注| www.779653.com-135彩票官网| www.880514.com-彩票骗局的案例| www.952741.com-七乐彩中奖规则奖金| www.999178.com-时时彩快三教程| www.ex21.com-公牛彩票-| www.sh97.com-彩app下载送彩金| www.225674.com-英国时时彩官方| www.54tk.com-江西有自助彩票机吗| www.983272.com-87彩店app下载| www.869858.com-福彩3d杀号牛材网| www.69967.cc-盛世彩票入口| www.78846.com-上海快三俩个和值5| www.138245.com-福利彩票怎么选| www.566804.com-彩虹六号ksg战队| www.887806.com-足彩精算师必看书籍| 博通彩票www.606694.com| www.974256.com-环球彩票68806| www.cai7234.com大发快三骗局揭秘| www.au92.com-彩神3app-| www.131593.com-重庆秀山结婚彩礼钱| www.kw24.com-时时彩合买平台| www.6410.in-九歌彩票安卓版下载| www.8296.xyz-宜春福利彩票站地址| www.1711.in-一彩票网-| www.345294.com-彩票齐中网看图解码| www.cai97.cc-吉林省快三走势图和| www.627079.com-美国最新彩票| www.756747.com-全民彩是什么| www.872425.com-凯里贵州体彩中心| 亿彩堂www.87668g.com| www.325744.com-排三试机号彩宝|