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天

知道了
彩票123现在叫什么名字 www.ri37.com-极速快三微信群| www.lg96.com-中彩在线害了多少人| www.n37.cn-凤凰网投彩票| www.w50.org-七星彩上期开奖结果| www.233385.com-快三准确的杀号| www.341266.com-彩民乐3d图158| www.456162.com-博彩手机验证送彩金| www.569308.com-彩票app注册送钱| www.668775.com-求福彩3d算胆公式| www.773047.com-可以玩厘的彩票平台| www.887477.com-下彩网怎么用不了了| www.61479.com-英博在线彩票| www.40556.com-万利彩平台地址| www.993156.com-中国竞彩资讯网| www.977620.com-网上买世界杯彩票| www.052745.com-网易彩票江苏快3| www.190906.com-人人中彩票-| www.51531.cc-青蛙彩票导航网站| www.222041.com-红牛腾讯分分彩计划| www.525271.com-福利彩票3d图片| www.108490.com-彩票能不能赢| www.267392.com-幸运五星彩开奖结果| www.507903.com-水立方彩票合法吗| www.671209.com-彩易网大乐透预测| www.945105.com-重庆时彩五星走势图| www.yr95.com-澳门快三走势图| www.250.com-xs原彩显示-| www.967936.com-彩票提现成功未到账| www.74yb.com-体彩在哪里看中奖| www.7042.cc-体育彩票篮球2串1| www.155060.com-足彩购买时间| www.369220.com-高频彩计划手机软件| www.77tw.com-国外博彩骗局| www.2833.wang-东莞彩乐糖果电话| www.838069.com-10086彩票-| www.977956.com-杭彩包装-| www.579078.com-福利炔彩开奖| www.643737.com-所以彩票318| www.986423.com-今天足彩专家推荐| www.968745.com-皇家彩世界开奖| www.yw98.com-中彩在线是什么| www.330937.com-体彩11选5助手| www.534777.com-大公鸡七星彩奖图| www.802528.com-体彩可以买篮球吗| www.877881.com-福彩3d大奖得主| www.it98.com-足球竞彩胜负平| www.010.website彩票世界网址| www.033445.com-快三豹子通中多少钱| www.232583.com-玩彩票算赌博吗| www.541318.com-河南省福彩领奖地址| www.954550.com-彩16安卓手机版| www.ut39.com-90彩票大厅-| www.57un.com-两张彩票的课文| www.503181.com-京东快彩可以赚钱吗| www.668426.com-河南订婚彩礼多少钱| www.822627.com-体彩算不算加时| www.254.in-体彩排列3预测字迷| www.76255.cc-玛雅吧彩票-| www.ua05.com-彩票达人登入| www.838916.com-竞彩足球与外围对冲| www.784948.com-七星彩欣雨统精华版| www.g90.cc-合彩王中王开奖结果| www.095883.com-微信哪里可以买彩票| 幸运彩票www.967699.com| www.8729.biz-跑马彩票三分钟开奖| www.02lh.com-彩虹屁什么梗| www.523726.com-百胜彩票软件下载| www.635750.com-时时彩app888| www.657132.com-网上的时时彩| www.75115.cc-买彩票是什么行业| www.698544.com-苹果app华夏彩| www.316028.com-体彩店与竞彩店区别| www.5872.bid-冒领他人彩票犯法吗| www.23986.com-众购彩票赌-| www.108965.com-错打彩票赔钱| www.019957.com-福彩快三网真的假的| www.250716.com-彩票app合集| www.575555.com-鸿运彩票登录| www.671756.com-大奖网彩票安卓版| www.812833.com-七乐彩论坛-| www.889717.com-彩票和值破解| www.979374.com-龙彩铅画-| www.hy7.cc-霸气的彩票宣传语| www.e52.com-大玩家彩票登录网站| www.983356.com-佰盈彩票安全吗| www.06ep.com-福利彩票双色33期| 500彩票www.50066c.com| www.pt23.com-彩神大发邀请码入口| www.477207.com-彩神通会员30群| www.507014.com-全国联网彩票走势| www.4004.cn-澳门彩票官网站| www.38959.cc-彩票免费资料大全| www.12ah.com-天天中彩票8月停售| www.4060.biz-309彩票app-| www.33620.com-线上购彩-| www.043567.com-彩票复式什么意思| www.128725.com-快三秒快餐店| www.55dq.com-体育彩票点抽成| www.54nu.com-福彩销售员培训| www.428833.com-福彩投注站查询| www.5096.top-淘彩票客服电话| www.333514.com-彩票数学家| www.201635.com-吉林市3彩票| www.752798.com-赠送的彩票纠纷案| www.029705.com-体彩中心有举报电话| www.110815.com-快三提前看开奖结果| www.133740.com-彩票图吧三d| www.078017.com-乐彩网首页彩票| www.051995.com-彩票竞猜金豆游戏| www.179019.com-大发快三规律| www.543296.com-大家乐彩票官方下载| www.378357.com-彩经网双色球杀蓝| www.554114.com-熊猫彩币-| www.234620.com-网上还可以买彩票吗| www.33997.cc-新浪彩票、新浪网| www.79718.com-体彩超值8中奖规则| www.154853.com-怎么看足彩结果| www.901133.com-五分钟快开彩| www.49hf.com-彩虹冰淇淋店游戏| www.223522.com-竞彩足球推荐| www.923900.com-彩票星期几可以买| www.142258.com-什么是彩票诈骗| www.825321.com-七星彩精彩6十1图| www.964162.com-福彩3d规律是什么| www.kk92.cc-易彩快3怎么看走势| www.8hp.com-福利彩票收藏目录| www.1242.vip-七星彩每次中奖金额| www.81if.com-哈尔滨体彩兑奖中心| www.5859.in-彩票黑客预测| www.9967.vip-濮阳县结婚彩礼多少| www.78827.com-福福福彩3d-| www.893857.com-彩61网址-| www.964507.com-初级彩票教育指导师| www.cai1116.com江苏快三是合法的吗| www.js01.com-竞彩任九开奖奖金| www.088080.com-亿彩网址登陆| www.mn52.com-赢彩票app靠谱吗| www.ej73.com-莆田快三开奖走势图| www.161630.com-附近体彩店电话| www.yp72.com-买十一选五彩票网站| www.713385.com-我买福彩3d输惨了| www.543251.com-双色球牛彩图迷| www.383050.com-彩票中奖金额最大| www.662821.com-国彩投注-| www.763708.com-吉快三走势图带连线| www.820528.com-彩钢瓦的尺寸| www.884541.com-排列三乐彩网断组| www.964060.com-体彩14场中奖规则| www.io25.com-pc蛋蛋微彩app| www.y03.top-奥客彩票开奖| www.139365.cc-如意彩票登录网站| 6678彩票www.2788cai.com| www.602400.com-彩票破了一点点小角| www.661885.com-射阳县体育竞彩店| www.720334.com-华夏彩票网上投注网| www.786527.com-8848彩票下载| www.854428.com-时时彩单双必中规律| www.323662.com-兰州七星彩开奖日期| www.153585.com-时时彩定胆个位技巧| www.444852.com-体彩税率-| www.639142.com-余姚体彩中奖| www.739495.com-08彩票下载-| www.391858.com-福彩3d魔图表| www.3jj.com-通博彩票app|