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.5284.xyz-派彩网违法吗| www.2761.pw-唐山福彩中心地址| www.3654.org-鸿耀彩票-| www.199210.com-广西快三快三走势图| www.682938.com-彩一app下载| www.112079.com-彩站宝竞彩推荐| www.71858.cc-360360彩票-| www.418336.com-全民彩票改名成什么| www.682027.com-河北省彩票中心| www.709422.com-亿彩堂靠谱吗| www.559570.com-多彩贵州网投稿平台| www.9480.cc-彩色混凝土施工规范| www.31zm.com-彩虹的图片大全| www.303638.com-三地字谜双彩论坛| www.455422.com-福乐彩票骗局揭秘| 凤凰彩票www.77802n.com| www.cp077.com-一分快三计划网在线| www.018849.com-快三预测大小| www.58np.com-彩宝吉林快三| www.900898.com-爱彩乐怎么样| E彩堂www.43818t.com| www.287245.com-彩之家快三-| www.417009.com-彩虹3无人机造价| www.552390.com-足彩分析师靠谱吗| www.632817.com-体育彩票怎么猜足球| www.v35.cm-查一下中国福利彩票| www.115161.com-贵州体育彩票七星彩| www.73qw.com-qq时时彩机器人| www.914548.com-彩票开奖结果最新| www.999902.cc-笫一彩票01cc| www.dv04.cc-五星彩开奖结果| www.yu43.com-世界国家彩票排行榜| www.20ku.com-福彩3d博通预测| www.37171.cc-好运来彩票是不是黑| www.266591.com-福彩3d香港图| www.035606.com-幸运快三赢钱技巧| www.34816.com-红旗彩票怎么下| www.004781.com-体彩和值遗漏统计| www.109858.com-快三龙最长的几个| www.77987.com-91彩站竞彩之家| www.085710.com-体彩网官方首页| www.814779.com-3d双彩网字谜汇总| www.935150.com-彩之网首页-| 乐博彩票www.67258c.com| www.sr11.com-福彩3d干期开机号| www.105097.com-牛彩网开机号| www.7574.vip-东方彩票1343| www.127895.com-彩虹哥王者-| www.236179.com-十四场足彩对阵表| www.325512.com-福彩三d综合走势图| www.103599.com-广东彩妆进货| www.388760.com-买彩票中奖图片| www.539341.com-福彩实体店倒闭| www.621365.cc-福彩夺宝连连看破解| www.696035.com-炫乐彩票官网首页| www.399690.com-彩票分析家破解版| www.574527.com-58彩票网官网首页| www.677881.com-福彩快三视频教学| www.772640.com-时时彩黑客破解代码| www.038220.com-大财神彩票园| www.559314.com-包头市福彩中心地址| www.652938.com-澳門博彩app| www.730010.com-卓易彩票ios| www.809227.com-9号彩票用户登录| www.882851.com-安徽福彩快三走试图| www.962521.com-富贵彩票网-| www.tw8.com-爱彩乐专业版大发| www.250655.com-中国彩票下载| www.336315.com-快钱彩票官网| www.46cb.com-排列三体彩百度贴吧| www.0703.vip-喜彩网齐中网| www.6620.vip-728彩票是真的吗| www.890809.com-魔方彩票可信吗| www.016833.com-深圳侯彩彩票合法吗| www.995500.com-竞彩之家寄居蟹注册| www.pq19.com-竞彩猫-| www.1950.cc-福彩3d怪字怪帖| www.1096.me-江西福彩2个多亿| www.406088.com-彩票教学中奖视频| www.517882.com-迷彩虎军情-| www.6319.cc-cp33彩票下载| www.107830.com-赌彩群-| www.374691.com-体彩直播间-| www.09dk.com-河内5分彩开奖规律| www.80ep.com-500彩票网完整版| www.185761.com-快三怎么算中奖金额| www.510047.cc-彩盈怎么下载| www.0417.me-彩票助赢论坛| www.476980.com-体育彩票场次| www.578188.com-中国竞彩足球论坛| www.179129.com-福利彩票开奖结果| www.393947.com-彩虹彩票官方网站| www.3467.cm-淘宝可以缴款体彩吗| www.136987.com-彩票店兑奖有提成吗| www.012281.com-彩票网站均暂停售彩| www.9zg.com-七彩彩票下载安装| www.62ap.com-彩票免费资枓大全| www.11603.com-玩高频彩赚钱牛人| www.005920.com-甘肃快三专家追号| www.221140.com-快三追号万能计算器| www.288073.com-高频彩是怎么开奖的| www.925952.com-福彩10选8-| www.342.me-色彩所有颜色| www.333898.com-体彩20选5走势图| www.475996.com-体彩5加2范围| www.590499.com-海南七星彩计划| www.686888.com-女孩子中彩票| www.786915.com-彩票中奖概率排行榜| www.901939.com-快开彩票玩法| 博亿彩票www.664by.com| www.717013.com-彩铅绘画手法| www.58nw.com-彩票趣闻-| www.90644.com-双彩论坛手机版下载| www.082885.com-淘彩吧购彩网| www.185124.com-福利彩票有几个彩种| www.322557.com-竞彩8串1概率| www.049477.com-黑彩流水返点| www.882412.com-彩吧论坛手机天齐网| www.xf32.com-彩中堂xyxxcc| www.54ou.com-怎么申请福利彩票站| www.068477.com-308彩票网官网| www.41662.com-竞彩2串1赚钱技巧| www.95qs.com-多彩投本金怎么回来| www.5355.pw-网上禁止买彩票| www.806283.com-彩票怎么倍投| www.905444.com-e球彩守号技巧| www.984610.com-彩虹店铺上买彩票| www.ig33.com-用微信买彩票可靠吗| www.449559.com-十四彩推荐-| www.696320.com-香港时时彩开奖结果| www.vj10.com-大发彩票能提现吗| www.076652.com-体彩排列五专家预测| 多乐彩票www.344242.com| www.jo22.com-五亿彩骗局解密| www.xm33.com-乐彩35-| www.14uo.com-福彩3d彩票过客| www.639531.com-七星彩奖金分配表| www.557922.com-大赢家彩票是什么| www.902849.com-快三好赚吗-| www.907790.com-合肥滨湖福利彩票| www.983465.com-青海省快三走势| www.cp6653.com-福彩安徽快三玩法| www.9508.top-百博七星彩投资网| www.198386.com-快三得多坑-| www.93718.com-蓝莓爆珠好彩香烟| www.123621.com-腾讯十分彩开奖记录| www.208657.com-湖北快三中奖规律| www.869488.com-手机七星彩怎么下单| www.hq65.cc-飞鱼彩票技巧| www.289040.com-一分快三龙-| www.776550.com-唐龙说彩最新推荐| www.864141.com-体彩任选5中奖规则| www.931908.com-中彩票500的图片| www.972843.com-彩客比分直播网首页| 500彩票www.50054t.com| www.dc20.com-678彩骗局-| www.of53.com-福彩开奖结果3d| www.zj63.com-河北福彩好运2| www.7497.vip-福彩大奖排行| www.291945.com-基诺彩票中奖规则| www.sm89.cc-世界杯足球彩票规则| www.379526.com-玩彩票700万彩票| www.cp9828.com-甘肃快三跨度走势图| www.ly43.com-幸运中彩票快3|