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.598710.com-买彩票中奖新闻视频| www.715488.com-足球竞彩彩票下载| www.339536.com-彩票怎么刷水| www.550370.com-休闲快三拉花| www.642462.com-福彩三地选胆图表| www.731505.com-8k彩票登录网址| www.817211.com-快三怎么样注册| www.898801.com-三的开奖号码福彩| www.971717.com-多彩api接口| www.qo3.com-体彩开奖号码排三| www.444243.com-体彩p3大小遗漏| www.1982.cc-足彩票-| www.297831.com-贵州快三遗漏图表| www.411830.com-今日开奖的彩票种类| www.977577.com-模拟购彩快三app| www.qw07.com-彩票外挂软件| www.156391.com-好彩堂中特网| www.841666.com-聚鑫彩票网-| www.938389.com-买彩票犯罪-| www.997251.com-鳄鱼彩票福彩3d| www.76en.com-彩库宝典ipad| www.5882.site-扬州彩票投注站| www.27635.cc-美国彩票破解| www.66961.cc-福彩中心栗演兵| www.026667.com-19017期体彩| 13e彩票www.703035.com| GO彩www.bai05.com| www.14422.com-体彩虚拟足球开奖| www.80372.com-福彩2018138| www.506848.com-梦想彩票骗局| www.9858.loan-台湾福星彩票开奖| www.750484.com-好彩vip平台怎样| www.880219.com-福彩预测分析彩吧论| www.9111.in-福彩双色中奖结果| www.775659.com-西红柿首富结尾彩蛋| www.215566.cc-全天彩票实时计划| www.346648.com-七彩票开奖-| www.584672.com-苏宁彩票平台靠谱吗| www.692077.com-彩乐网最新软件| www.767422.com-福彩3d开奖72期| www.9508.top-百博七星彩投资网| www.589726.com-河内五分彩开奖结果| www.716089.com-昙花彩铅画-| www.914995.com-时时彩送彩金19| 华彩www.71399g.com| www.cp9899.com-今天快三开奖的号码| www.51996.com-福彩61中奖规则| www.816684.com-吉林快三微信计划群| www.949955.com-国家禁止网络彩票| www.rl64.com-深圳快乐彩app| www.9ay.com-福彩3d对子多少钱| www.384056.com-福利彩票口号扶老| www.31712.cc-易彩彩票选号走势图| www.044081.com-百信盈彩票是真的吗| www.586088.com-18彩票网正规| www.670708.com-杭州竞彩店合作| www.747005.com-福彩3d10和值表| www.827292.com-福彩3d杀码彩易网| www.911387.com-英国五星彩开奖结果| www.971559.com-体彩排3走势图| www.092269.com-福建福彩3d的中奖| www.207633.com-彩票01下载-| www.803031.com-七星彩复式最佳买法| www.512381.com-秋天彩铅画-| www.9256.org-乐事彩票-| www.702293.com-甘肃快三信用玩法| www.810312.com-福彩3官方直营网| www.884386.com-福彩天牛图库| www.960573.com-香港所有赌场送彩金| 凤凰Vwww.www.fh7557.com| www.967205.com-聊呗彩票群-| www.804.in-七乐彩杀号预测专家| www.350619.com-内蒙古快三周公解彩| www.466666.com-七乐彩销售到几点| www.976774.com-中国结婚彩礼排行榜| www.690256.com-竞彩足球让分胜平负| www.66833.com-中国福彩中心在哪| www.151506.com-老快三杀号-| www.516166.com-尤师彩票-| www.69197.cc-博冠彩票app下载| www.029894.com-古风女背影彩铅| www.753.net-彩合网一合中特| www.034963.com-彩68安全吗-| www.422077.com-开一家福利彩票| www.qa49.com-132彩票官方软件| www.717908.com-彩客app-| www.817956.com-彩票晚上几点停售| www.962534.com-彩票3d专业软件| www.hb79.com-新浪福彩3d预测| www.308094.com-安徽快三电视走势图| www.67fz.com-快三分分彩技巧| www.948189.com-易彩网走势图| www.271569.com-广东福彩26选5| www.363473.com-鼎吉国际彩票怎么样| www.487605.com-代理福利彩票挣钱吗| 福彩www.86267y.com| www.uq52.com-体彩排列五综合走图| www.22433.com-鸿鼎彩票登录| www.85816.com-彩涂铝卷多少钱一吨| www.59rm.com-福彩票三地开奖结果| www.0669.cm-竞猜足彩预测| www.292962.com-福彩3d万彩吧| www.2959.cm-幸福彩票是什么意思| www.322944.com-彩票今日开奖| www.507622.com-内蒙古体彩网双色球| www.6055.biz-3d彩票杀号方法| www.586283.com-彩票研究都是白费| www.168664.com-时时彩开奖结果| www.365285.cc-彩库宝典平特一肖图| www.054843.com-安徽快三一天是多少| www.16229.cc-福彩七乐彩开奖查询| www.412370.com-福州彩钢围挡| www.70kh.com-旺彩彩票客户端下载| www.738220.com-体育彩票网络购彩| www.890377.com-坤彩科技股吧| www.984772.com-青海福彩中心主任| www.210.cx-唯美凤凰彩铅画图片| www.6677.vip-足彩任选14场规则| www.25935.cc-高级彩虹屁范本| www.78301.com-大智慧彩票下载安装| www.373701.com-福建体彩大星走势图| www.pa84.com-福彩快三跨度和值表| www.143325.com-彩运8网站-| www.095596.com-众彩网走势图| www.113530.com-四川有福彩快三吗| www.048.cm-彩票怎么捡漏| www.0833.shop-线上买足彩怎么买| www.639503.com-500彩票终端机| www.772548.com-中华娱乐彩票app| www.843188.com-遵义体彩领奖地址| PK彩票www.230757.com| www.hb83.com-3d无名新彩吧| www.77244.cc-众博彩票网骗局| www.16386.cc-台湾大福彩中奖号码| www.62711.cc-福利彩票店转让双彩| www.801236.com-手机彩票966| www.871128.com-怎样申请福彩投注站| www.982803.com-湖北快三玩法对照| www.av7.cc-快三在哪注册| www.qc08.com-彩500怎么下载| www.y32.net-杏彩娱乐-| www.017941.com-彩票站如何选位置| www.115377.com-彩铅画入门图片| www.194422.com-红牛彩票网赚真假| www.70pj.cc-芜湖体彩竞彩店| www.789124.com-竞彩论坛客户端下载| www.879749.com-体彩新型终端机| www.933047.com-网络快三能玩吗| www.977730.com-豪彩vipapp| 七星乐www.535666e.com| www.966190.com-发彩网app能下吗| www.cp667.cc-全国快三-| www.528888.com-体彩大乐透频道预测| www.632726.com-快三末班车几点| www.724222.cc-查看彩票开奖| www.yl42.com-阿莉彩票手机投注站| www.10jc.com-x23幻彩版耗电快| www.87dn.com-圣美娱乐时时彩| www.1559.pw-陇彩宝怎么用| www.99323.com-秒数时时彩破解| www.974041.com-网上体彩投注| www.423523.com-福彩微信头像| www.686712.com-中彩那天的板书| www.ss30.com-时时彩必赢买法|