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天

知道了
58福彩 www.072073.com-彩票靠谱不-| www.217202.com-彩票中奖神器软件| www.612325.com-速盈彩票下载安装| www.954537.com-牛蛙彩票开奖历史| www.cp5685.com-五分快三是哪开奖| www.676395.com-结婚要8万彩礼| www.529565.com-80彩票是啥意思| www.788322.com-19039足彩分析| www.71151.cc-彩民乐3d图-| www.41359.com-彩票不真实-| www.026157.com-彩客彩票007网站| www.117726.com-足球竞彩比分旧版| www.199111.com-快三开奖时间调整| www.346656.com-神彩网手机版| www.480566.com-3d多彩网字谜图迷| www.957655.com-下载彩乐透-| www.261144.com-江苏快三综合| www.ae6.cc-中国福彩开奖| 众彩www.871660.com| www.7698.shop-彩票五个亿-| www.181845.com-我要中彩app| www.0488.cc-体育彩票网点号查询| www.718352.com-强力巨彩彩票| www.831053.com-黄鹤楼迷彩烟支| www.922770.com-彩妆店名字大全| www.981594.com-福彩和体彩哪个靠谱| www.ss5.com-重庆时彩官方网开奖| www.915833.com-体育彩票代理加盟| www.976764.com-彩礼数额-| www.cp1190.com-今日内蒙快三推荐号| www.08gs.com-668彩票网骗人| www.775414.com-福彩有多组合| www.020243.com-58同城彩票-| www.dn86.com-中彩票图片-| www.639610.com-体育竞彩店怎么样| www.772945.com-最佳彩票投注平台| www.059565.com-英国五星彩开奖结果| www.092577.com-河南信阳彩礼| www.200454.com-河南福彩快三走| www.279898.com-手机时时彩app| www.584748.com-广州足彩分析师招聘| www.672510.com-足彩预测app| www.762057.com-体育彩票图片大全| www.831251.com-彩票游戏平台手机版| www.900989.cc-东北彩王马洪平技术| www.974427.com-能用的彩票app| www.111093.com-福建彩票中奖排行| www.698591.com-k彩网速-| www.kp58.com-福彩快三概率| www.68su.com-乐彩商城怎么提现| www.171161.com-广西快三预测| www.708208.com-平台上买彩票被骗| www.22616.cc-大发快三谁控制| www.525034.com-博彩同ip怎么破| www.992901.com-新疆喜乐彩开奖信息| www.34ib.com-摇摇乐彩票-| www.895545.com-如何叫你投彩票| www.984273.com-二分彩技巧-| www.3nu.com-河内彩票走势图| www.75ot.com-古建彩绘文样| www.022906.com-体育彩票开奖排列五| www.385944.com-招彩票代玩-| www.524258.com-时时彩12生肖| www.602102.com-彩票可以伪造吗| www.679150.com-平台跳槽送彩金| www.852209.com-中福秒秒彩-| www.232388.cc-玩彩票赚钱-| www.325816.com-排列三经彩′网| www.404699.com-七星彩今期讲解| www.552655.com-华彩网计划| www.x50.site-九资料彩票网| www.97hw.com-彩排的心情说说| www.6366.vip-印象彩票官方网| www.104117.com-足彩比赛结果| www.fq6.cc-福利彩票彩种下载| www.a55.vip-重庆时时彩玩法心得| www.26si.com-万博竞彩软件安全吗| www.316.biz-乐彩赢代理怎么取消| www.3664.wang-今天出的彩票号| www.8781.biz-重庆时彩出号规律| www.28427.com-昆山双色球彩票大奖| www.96862.cc-3d福彩网上咋买| www.801774.com-永红彩票线路导航| www.690603.com-最好的彩票软件网站| www.m31.space-大发时时彩规律技巧| www.833423.com-晚晚好彩资料| www.sl50.com-时时彩最新人工计划| www.768383.com-幸运中彩票安卓版| www.221705.com-凤凰彩票破解器下载| www.760051.com-南粤风采好彩一| www.910771.com-nba体彩分析| www.986491.com-体育彩票有多少种| www.fh32.com-彩鸿彩票app| www.6631.com-福彩双采最大| www.150271.com-彩51-| www.505003.com-参加彩排是什么意思| www.30qb.com-腾讯分分彩预测方法| www.89ft.com-福彩3d新彩吧大全| www.533860.com-明发彩票是真是假| www.89298.com-手机cp彩票下载| www.53en.com-彩票法律法规公安| www.800123.com-开彩妆加盟店排行榜| www.4540.cc-七星彩近2000期| www.824163.com-三彩加盟-| www.965168.cc-中华彩票邀请码图片| 福彩www.15355p.com| www.487300.com-微信中彩网-| www.00176.com-什么是爱投彩票| www.131554.com-修武彩票-| www.947372.com-福彩蛋蛋靠谱吗| www.029640.com-博彩接口收费吗| www.266806.com-中发彩票邀请码| www.261551.com-体彩福彩下载安装| www.16220.com-福彩双色球电视直播| www.025787.com-喜乐彩彩控-| www.191392.com-福彩3d藏机图| www.58gk.cc-银行监守自盗买彩票| www.he11.com-广西快三三军玩法| www.7yy.cc-中彩票20万-| www.58yy.cc-四川彩票官网首页| www.877403.com-彩票怎么猜号| www.971778.com-快捷彩票网是真是假| www.cj41.com-快三正规app下载| www.w31.club-电玩城玩什么彩票多| www.65rm.com-导师教你买彩票包赔| www.0549.xyz-江苏猫彩快三预测| www.021.cm-3d彩票16期推荐| www.355934.com-时时彩源码出租| www.521438.com-彩票预测诈骗| www.765868.com-快8彩票彩民乐园| www.830641.com-领先彩票app| www.373232.com-800万彩票下载| www.471354.com-卖私彩抓老板还是抓| www.558540.com-彩铅画初学者简单| www.626891.com-福利彩票价格| www.687146.com-手机刮彩票-| www.751854.com-彩票中彩网-| www.810907.com-福州体彩店转让信息| www.871245.com-乐赢彩票app| www.923557.com-高频彩杀一码技巧| www.983407.com-创名彩票-| www.rw1.com-快三胆码公式| www.852878.com-国外国彩票中奖号码| www.949669.com-福彩三天投资计划| www.03er.com-南宁体彩去哪里领奖| www.655533.com-福彩3d天宇和值| 三星娱乐www.sxyl7.com| www.cp30.com-乐彩神app下载| www.op40.com-彩票纸能买废纸吗| www.19we.com-体育彩票活动内容| www.324928.com-华人彩是真的么| www.uj92.com-大发快三提现不到账| www.505237.com-29彩票-| www.1837.vip-正彩文具联系电话| www.375935.com-菲律宾时时彩网址| www.507058.com-e乐彩手机专业版| www.631607.com-广东彩王图片| www.q37.net-快乐双彩开奖| www.419702.com-富盈彩票-| www.22ju.com-博彩充值套利方法| www.213.red-三毛彩票app| www.3066.pw-四场进球彩开奖时间| www.7782.biz-皇室彩票下载| www.128530.com-分分快三漏洞|