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.732710.com-西班牙酷玩快三真假| www.78201.com-五分钟快彩-| www.066966.com-甘肃快三和值彩经网| www.399823.com-南国七星彩开奖| www.630328.com-彩票福彩15选5| www.744007.cc-20分钟彩票app| www.858243.com-博彩团队真能赚钱吗| www.953724.com-彩票牛材网-| www.cp5356.com-内蒙古快三预测一号| www.799567.com-浙江舟山福彩快2| www.892938.com-全民彩票官方网| www.967876.com-快三复式中奖查询表| www.cp106.com-广西快三奖金对照表| www.287527.com-彩票合买大厅网址| www.292119.com-彩688彩票-| www.045.site-电脑彩票收藏价格| www.032378.com-推彩票的渠道| www.61kd.com-中国福彩3d八卦图| www.0534.xyz-快三模拟投注器| www.580938.com-福彩最大值振幅| www.bb12.cc-一分快三公式| www.993094.com-七乐彩开奘结果| www.ds87.com-22彩票ios版| www.439340.com-秋叶说彩专栏| www.337199.com-广西快三是真的吗| www.433100.cc-双色球杀号彩吧| www.572637.com-外围体彩网站哪个好| www.481382.com-拉萨彩票中心| www.055763.com-彩票坊一分快三| www.03vg.com-体育彩票山东试点| www.512.tv-福运彩彩票投注网| www.688541.com-鸿鼎彩票登录的| www.811348.com-排列三论坛家彩网| www.898662.com-时时彩挂机软件骗局| www.975402.com-滨州福彩客户端下载| www.cp6779.com-快三和值奖金对照表| www.122289.com-5亿彩下载官方苹果| www.83wv.com-一定牛体育彩票软件| www.335646.com-福建快三未出号| www.432318.com-河南t乐彩-| www.558887.com-夸人彩虹屁文案| www.678123.com-牛彩图谜汇总| www.783728.com-金沙彩票软件| www.894347.com-两分快三开奖记录| www.980767.com-附近的福利彩票| www.bc50.com-五分钟快三走势图| www.xx11.cc-818彩票app-| www.21bw.com-699彩票苹果下载| www.508781.com-聚象彩是什么网站| www.141615.com-彩票选号器软件下载| www.085761.com-彩神喷绘机质量怎样| www.76570.com-彩票中5000万| www.789412.com-彩色耐磨地坪| www.903223.com-彩票跟单员-| www.990872.com-4s彩票中奖-| www.kk57.com-彩票驿站大快3| www.192359.com-彩6com-| www.235284.com-齐鲁七乐彩预测| www.830839.com-新彩彩票黑钱吗| www.eb13.com-众彩彩票app下载| www.yi49.com-体彩怎样才算中奖| www.582346.com-现代彩票app| www.877301.com-即开型彩票中奖技巧| www.46le.com-云烟五彩缤纷的意思| www.717210.com-名画彩铅-| www.830465.com-彩票查看软件有哪些| www.905556.com-快三到底怎么买| www.965634.com-快三猜一码是多少| 众彩网www.88065b.com| www.4523.org-八马官网彩票| www.366037.com-彩铅画人物背景| www.213757.com-彩神论坛-| www.317505.com-彩票提前开奖公告| www.429883.com-超简单又好看水彩画| www.749089.com-福彩快3计划软件| www.50qd.com-彩经网快三-| www.104056.com-好彩爆珠4味道| www.329561.com-118彩票安卓版| www.018195.com-福彩福彩字谜图谜| www.12kf.com-下载天天彩票αpp| www.94oq.com-易彩乐被骗-| www.722080.com-爱彩乐彩种-| www.788126.com-中国足彩网篮球比分| www.866487.com-昨晚彩票开奖结果| www.921098.com-天才彩女专家专栏| www.971495.com-3d彩吧44462| www.mu97.com-中彩彩票源码| www.5nc.cc-足彩交税-| www.97ej.com-给彩金网站-| www.818111.com-3d家彩网杀号| www.938566.com-时时彩代理怎么判刑| 500彩票www.66653m.com| www.210828.com-中国体彩网开奖查询| www.271591.com-北京快三和值走线图| www.9784.cc-七星彩中奖7注| www.p24.space-体育彩票几个号码| www.80ua.com-2019年福彩时间| www.1856.date-时时彩长期赢钱的人| www.338641.com-彩尊骗局-| www.625522.com-京go娱乐福彩| www.873445.com-竞彩限售-| 500彩票www.550263.com| www.183830.com-3d走势图百度乐彩| www.3831.biz-排列五彩图宝贝| www.793600.com-如何计算彩票| www.899518.cc-手机彩票平台大全| www.964823.com-福建体育彩票走势| 大钱庄彩票www.909888.com| www.052235.com-三d福利彩票和值| www.631091.com-足球体彩奖金怎么算| www.773958.com-天天彩票qq交流群| www.jp75.com-五分彩私网-| www.61qp.com-最棒的彩票销售系统| www.268003.com-福利彩票选号技巧| www.38by.com-七星彩预测规律图| www.1156.mobi-彩票励志诗-| www.0884.cm-买彩票都中过多少钱| www.874263.com-福利彩票开机号| www.335154.com-广西快三大小计划| www.wu83.com-快三助手电脑版下载| www.60sv.com-今天双彩球号码| www.000178.com-诚信彩票-| www.97993.com-新加坡六福彩走势图| www.27284.com-体彩单场胜负怎么算| www.307811.com-好彩投提现-| www.2463.vip-快三投注微信| www.oq62.com-陈赫中奖彩票号码| 博友彩www.938751.com| www.13bs.com-什么是智投彩票| www.08101.com-湖南体彩报纸| www.46305.com-中奖彩票店有提成吗| www.550092.com-彩播版本1-| www.663779.com-篮彩竞彩分析预测| www.808973.com-柬埔寨5分彩真实么| 500彩票网www.843633.com| www.42626.com-秒彩苹果下载| www.91719.cc-彩名堂计划不会看| www.921720.com-高频彩职业彩民技巧| www.388033.com-华彩彩票是真的吗| www.749559.com-犀牛彩票app| www.1555.vip-多盈彩票手机版| www.52by.cc-1分彩开奖历史| www.150441.com-豪彩国际10app| www.118755.com-网络赌一分快三假吗| www.79gt.com-彩板车棚-| www.83107.com-篮球竞彩软件| www.58188.com-大奖网彩-| www.645900.com-竞彩足球投注方式| www.381783.com-上海彩亿公司靠谱吗| www.16893.com-体彩排列三的和值尾| www.345933.com-彩神是个坑吗| www.940959.cc-大发快三研究吧| www.991998.com-福彩种类和玩法| www.am61.cc-七星彩走势图彩经网| www.ol41.com-福彩种类及规则| www.80yi.com-彩神通四码会员资料| www.215253.com-凤凰彩票彩种| www.42295.com-有比k彩好的平台吗| www.47tz.com-开一家福利彩票| www.855.vip-幸运彩票助手安卓| www.mg86.com-盈彩网是真的吗| www.607767.com-日本彩票种类| www.687093.com-体彩顶呱刮中奖图片| www.768191.com-uu彩票苹果-|