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.33085.com-福彩3d大哥算独胆| www.66835.com-彩票77手机版| www.622903.com-3d大本营彩票论坛| www.13398.cc-吉林体彩网官方首页| www.77759.com-6彩-| www.332027.com-福彩网圈套-| www.509956.com-3d小彩报-| www.912975.com-鼎丰彩票骗局| www.am69.com-贵州双色球中奖彩票| www.177840.com-北京快三和值走图| www.yw07.com-甘肃竞彩专家推荐| www.174719.com-吉林快三平台下载| www.62007.com-玛雅吧彩票游戏网址| www.105395.com-中国哪里卖无嘴好彩| www.353119.com-热购彩网址-| www.148555.com-玉林福利彩票店面| www.031032.com-相亲彩票-| www.926803.com-赼彩天下-| www.sd40.com-腾讯时时彩开奖| www.232.cn-极速快开彩票软件| www.870201.com-福彩3d规律研究院| www.876740.com-正版港彩-| www.979464.com-龙彩票-| www.q82.cc-赌博快三-| www.264.live-品牌彩妆在哪里加盟| www.20oe.com-彩票店从哪挣钱| www.344638.com-彩票棋牌下载| www.764434.com-01彩票在线下载| www.856909.com-幸运飞艇时时彩软件| www.du04.com-安徽快三今天推荐号| www.50dn.com-烟台福利彩票销售员| www.9985.site-易彩快3大小单双句| www.144084.com-时时彩之家论坛| www.cp6669.cc-北京快三是什么彩票| www.513776.com-彩票榜注册-| www.671460.com-排列三电脑彩宝网| www.441700.cc-竞彩258彩票骗局| www.275205.com-体育彩票七位数中奖| www.358358.com-彩宝彩票下载苹果版| www.448548.com-3d梁博说彩小燕子| www.298332.com-福彩快三内蒙规则| www.fo92.com-彩乐乐专家杀号| www.56.biz-彩泥图片-| www.981225.com-彩冰淇淋视频| www.038028.com-双色球彩票工具箱| www.024892.com-亿彩网app-| www.223851.com-分分时时彩免费计划| www.988115.com-掌上中彩可靠吗| www.gf26.com-彩客网手机版| www.114080.com-福彩计划软件定位| www.211933.com-手机购彩软件哪个好| www.61fr.com-牛蛙彩票开奖查询| www.17bm.cc-华夏鑫彩积分互通| www.oz38.com-北京快三遗漏数据库| www.750216.com-爱中彩票平台怎么样| www.366005.com-500彩票网资讯| 500彩票www.66653.com| www.598501.com-体彩19039期| www.404415.com-动物彩铅简笔画| www.003312.com-公海彩票官网| www.213906.com-足彩分析师-| www.58775.cc-正规的彩票软件下载| www.092170.com-中国竞彩网论坛| www.984842.com-体彩最新选号法| www.el00.com-福彩好运3开奖结果| www.81832.com-时时彩追热号与冷号| www.055000.com-足球竞彩比分结果| www.038886.com-赢彩网江苏快三计划| www.129759.com-南粤彩票论坛| www.416200.cc-博彩算金融吗| www.997956.com-乐彩网工具图表下载| www.08ec.com-七星彩小说所有番外| www.94if.com-菠萝彩彩票软件| www.001226.com-竞彩篮球一场比赛| www.122428.com-买时时彩qq群| www.208520.com-湖北快三输太掺了| www.509930.com-河内五分彩在线计划| www.722122.com-体彩乐彩网-| www.893901.com-金牛彩票官网| www.967993.com-合买彩票的网站| 大玩家彩票www.717228.com| www.zk70.com-用你ip代玩彩票| www.355929.com-美国劲球彩票多钱| www.498789.com-佰萬彩票开始多久了| www.596219.com-甘肃福彩中心位置| www.711614.com-红彩会线路-| www.212459.com-福彩投注站末位| www.365312.cc-体育彩票缴费| www.531336.com-贷款买彩票输啦| www.671648.com-做梦梦见彩票中奖| www.809003.com-微彩出款不了| www.14uv.com-彩票在那个平台玩好| www.254733.com-重庆分分时时彩| www.s66.me-老梁说彩票巨奖骗局| www.7710.vip-香港地下六仺彩资料| www.028811.com-合肥福彩兑奖中心| www.135797.com-彩票员招聘-| www.233476.com-快三赌博大小单双句| www.353043.com-七星彩开奖号马| www.2616.com-体彩亿元大奖彩票| www.195984.com-赣快三走势图| www.708329.com-神彩争霸2元彩票| www.3mr.cc-七彩彩开奖直播| www.346448.com-明代红绿彩特征| www.300883.com-南方双彩首页| www.483910.com-好彩堂马会现场结果| www.873664.com-三的彩票还有试机号| www.987684.com-乐优炫彩提现不了| www.874199.com-玩吉林快三的人多吗| www.960485.com-近期泰安彩票中奖| www.cp96.com-河南省幸运彩开奖号| www.855595.com-极速时时彩彩票| www.996770.com-中彩网富坛免费资料| www.wv19.com-电子游艺送彩金| www.21976.cc-旧版50o万彩票网| www.64107.com-足彩米客新浪博客| www.790938.com-好彩香烟蓝莓爆珠| www.881594.com-聊天交友骗女孩博彩| www.956701.com-彩票打错怎么赔偿| 乐彩网www.3416t.com| www.139436.com-每日首充送彩金彩票| www.05cy.com-彩铅头发阴影怎么画| www.0764.org-快三和值怎样买稳赢| www.968550.com-竞彩足球临时变盘| www.114.com-福利彩票网上选号| www.6327.biz-彩票丢失了怎么办| www.50088.com-江苏快三怎么稳赢| www.6518.in-高兴彩票投注平台| www.4776.cm-快彩app网站| www.660572.com-下彩网网站有哪些| www.787577.com-足球竞彩36o| www.899019.com-湖北快三输钱| www.cai9144.comhao123彩票-| www.239220.com-江苏快三99彩正规| www.879895.com-安徽福彩新快三| www.133389.com-围挡彩钢围挡价格| www.776833.com-彩播直播-| www.945850.com-足彩胜负14场玩法| www.tt15.com-分分彩刷量技巧| www.0321.vip-福州体育彩票中心| www.913358.com-江苏快三可以提现吗| www.974957.com-3d彩民之家走势图| www.bh5.com-彩65app-| www.640071.com-福彩三天什划| www.42147.com-彩12彩票苹果版| www.247448.com-上海快三时间段| www.ko10.com-91彩神是合法的吗| www.12ku.com-彩虹颜色排序图片| www.580631.com-七是彩最新开奖| www.667147.com-七乐彩一等奖中奖率| 爱彩www.003ac.com| www.408003.com-没有七星彩买| www.060024.com-9彩平台怎么样| www.tn76.com-安徽快三专家推荐| www.96hq.com-鸿彩直播木木| www.505384.com-博彩王软件手机版| www.49525.com-网易彩专家预测| www.969147.com-天天彩票网靠谱吗| www.el26.com-一分快3彩票下载| www.758516.com-99彩票靠谱吗| www.821609.com-3d彩圣手字谜| www.881732.com-辉煌彩票苹果版| www.953069.com-买彩票怎么买的| 彩民网www.caim4.com|