QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jQuery仿京东云系列tab图标导航切换代码

原创商用 jQuery仿京东云系列tab图标导航切换代码

jQuery仿京东云产品系列图标导航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="yun-main-solution">
	<div class="yun-main-hd">
		<h3 class="yun-main-title">成熟、领先的解决方案</h3>
		<p class="yun-main-des">行业纵深,直达痛点,专业经验为您解决多种业务难题</p>
	</div>
	<div class="yun-main-bd">
		<div class="yun-solution-slider-content">
			<ul class="yun-solution-wrap">
				<li class="yun-solution-item  wapSolution current" style="background: url(statics/images/dsy.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>电商云</em> </dt>
								<dd class="yun-solution-des">在云计算和大数据基础上,结合了京东十多年电子商务技术及运营经验,推出帮助传统企业互联网转型和打破人、货、场边界的无界零售电商解决方案。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
				<li class="yun-solution-item wapSolution" style="background: url(statics/images/tgy.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>托管云</em> </dt>
								<dd class="yun-solution-des">整合京东云丰富的云资源,为您提供稳定、安全、经济的应用托管解决方案。一站式服务,业务轻松上云;弹性扩展,轻松应对业务快速增长;全方面安全防护,保障业务数据安全。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
				<li class="yun-solution-item" style="background: url(statics/images/sjy.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>数据云</em> </dt>
								<dd class="yun-solution-des">结合京东“完善高质的数据链+丰富的业务场景+强大的数据分析能力”,京东云大数据处理引擎充分覆盖各行业大数据需求。京东云大数据专家团队将根据用户具体需求,提供丰富的解决方案。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
				<li class="yun-solution-item wapSolution" style="background: url(statics/images/wly.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>物流云</em> </dt>
								<dd class="yun-solution-des">依托京东稳定、高效、灵活的云计算和大数据能力,为政府和企业提供物流技术、产品及运营咨询服务,降低用户自建物流成本,提升物流运营效率,助力政企互联网+物流转型升级。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
				<li class="yun-solution-item" style="background: url(statics/images/zny.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>智能云</em> </dt>
								<dd class="yun-solution-des">依托京东云技术和大数据能力,整合京东在互联网市场的优质资源,提供技术支持、智能产品对接、智能创业孵化等服务,加速政府、企业及个人在“互联网+智能”创新转型。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
				<li class="yun-solution-item" style="background: url(statics/images/cyy.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>产业云</em> </dt>
								<dd class="yun-solution-des">立足产业客户的行业需求,依托京东云强大的技术与云产品;并结合京东的互联网+的实践经验与集团资源;透过京东云专业服务,共筑行业标杆与业界领先的产业解决方案。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
				<li class="yun-solution-item" style="background: url(statics/images/jry.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>金融云</em> </dt>
								<dd class="yun-solution-des">采用独立的机房集群,与公有云物理隔离。基于两地三中心的机房布局,满足一行三会对于金融业的监管要求。帮助金融客户从现有传统IT迈向大数据和云计算,实现业务创新转型。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
				<li class="yun-solution-item" style="background: url(statics/images/api.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>数据 API 平台</em> </dt>
								<dd class="yun-solution-des">京东云万象大数据开放平台是京东云在已有的云计算平台基础上围绕数据提供方、数据需求方、数据服务方等多方,构建了以数据开放、数据共享、数据分析为核心的综合性数据开放平台,为全行业提供权威数据支持,打造全行业数据开放的优质生态圈。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
			</ul>
			<a href="javascript:;" class="yunfont yun-btn-more js-btn-more">展开全部</a>
			<div class="yun-arrow-wrap yun-arrow-current1" id="yun-arrow-wrap">
				<div class="yun-arrow-item"></div>
				<div class="yun-arrow-item yun-arrow-triangle"></div>
				<div class="yun-arrow-item"></div>
			</div>
		</div>
		<div id="js-sliderBox" class="w yun-solution-list-wrap hidden-xs" style="position: relative;">
			<ul class="yun-solution-list" style="width: 1200px; left: 0px; position: absolute;">
				<li class="yun-solution-list-item current" data-slider-idx="0" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/dsy.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">电商云
					</p>
				</li>
				<li class="yun-solution-list-item" data-slider-idx="1" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/tgy.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">托管云
					</p>
				</li>
				<li class="yun-solution-list-item" data-slider-idx="2" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/sjy.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">数据云
					</p>
				</li>
				<li class="yun-solution-list-item" data-slider-idx="3" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/wly.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">物流云
					</p>
				</li>
				<li class="yun-solution-list-item" data-slider-idx="4" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/zny.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">智能云
					</p>
				</li>
				<li class="yun-solution-list-item" data-slider-idx="5" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/cyy.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">产业云
					</p>
				</li>
				<li class="yun-solution-list-item" data-slider-idx="6" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/jry.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">金融云
					</p>
				</li>
				<li class="yun-solution-list-item" data-slider-idx="7" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/api.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">数据 API 平台
					</p>
				</li>
			</ul>
			<a href="javascript:;" class="yun-solution-btn yun-solution-btn-prev yunfont disabled">?</a>
			<a href="javascript:;" class="yun-solution-btn yun-solution-btn-next yunfont disabled">?</a>
		</div>
	</div>
</div>


<script type="text/javascript">
	$(function(){
		//TAP
		$('ul.yun-solution-list li').click(function(){
			var index = $(this).index();
			$('ul.yun-solution-wrap li').removeClass('current').eq(index).addClass('current');
			$('#yun-arrow-wrap').attr('class','yun-arrow-wrap yun-arrow-current'+(index+1));
		})
		//背景变换
		$('ul.yun-solution-list li').hover(function(){
			var that =$(this);
			var i=0;
			bgChange = setInterval(function (){
				i+=-84
				that.find('div').css('backgroundPositionY',i)						
				if(i<=-2058){
					clearInterval(bgChange);
				}
			},50)
		},function(){
			clearInterval(bgChange);
		})
	})
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
密歇根神奇彩票 www.60ay.com-竟彩足球比分直播| www.414455.com-足彩十四任选九预测| www.28qk.com-福彩128期3d| www.20345.com-大发快三求带回血| www.3739.cn-福利彩票天罡八卦图| www.152839.com-彩票12选5辽宁| www.352589.com-黑彩网站报警| www.528868.com-体彩竞彩店转让| www.673313.com-福彩149期结果| www.777265.com-彩神通软件狗| www.869798.com-彩票选号k线图| www.980068.com-买彩票怎么看中奖了| www.wl19.cc-3d看彩啦-| www.0088.online福彩3d讲座程| www.298253.com-兰州福彩-| www.104698.com-新快三游戏恐龙| www.207619.com-最新的彩票缩水软件| www.019521.com-快三长龙最多| www.60va.com-七彩开奖号-| www.4096.pro-珐琅彩瓷器如何鉴定| www.423755.com-竞技彩票-| www.568662.com-约彩365下架| www.781908.com-个人买彩票-| www.912923.com-彩票公司合法的吗| www.xk72.com-下载鑫彩网app| www.3212.org-搏123彩票网站| www.39503.com-七星彩好的号码推荐| www.947822.com-彩经网绝杀红球| www.1937.top-体彩店转让合同范本| www.3570.cc-双色球下载彩票平台| www.r88.biz-网上江苏快三| www.3000.org-众亿彩票网-| www.25379.cc-桃花彩铅画法| www.001863.com-鲛人鲨福彩3d| www.123489.com-福彩现在还敢买吗| www.4961.com-超级大乐彩怎么玩| www.88347.cc-易学测彩的新方法| 杏彩www.00840s.com| www.5650.biz-彩组词四字词语| www.697075.com-天津时彩直播| www.778985.com-五洲彩票下载安装| www.865313.com-昨日福彩3d中奖| www.010397.com-彩票好中奖么| www.135809.com-体彩竞猜篮球| www.316.in-开彩票店有什么风险| www.388036.com-什么是华彩-| www.120.com-宝盈彩下载-| www.440813.com-海南彩票193期| www.017591.com-如何破解王牌彩票| www.7980.biz-博彩骗局在国外| www.1925.net-竞彩店申请流程| www.794499.com-非法互联网彩票举报| www.560328.com-澳门快三技巧| www.679520.com-搜狗彩票走势图| www.794040.com-公务员彩票-| www.879377.com-福彩新快三开奖结果| www.bb69.com-两分快三计划| www.551368.com-彩票跟单盈利计划| www.281288.com-五星彩com-| www.qu18.com-什么是福彩蛋蛋| www.959752.com-世纪佳缘上的彩票女| 凤凰彩票www.88266s.com| www.088211.com-澳客体彩下载| www.289351.com-今天七彩奖开奖结果| www.378719.com-周口体彩中心在哪| www.032111.com-竞彩数学-| www.145888.com-上海基诺彩票开奖| www.220566.com-旺彩双色球-| www.288985.com-彩神软件在哪儿下载| www.358594.com-天马彩票手机版| www.433761.com-菜6菜彩票-| www.365588.com-七星彩查询开奖结果| www.221162.com-快三万能倍投计算器| www.303244.com-7彩彩票犯法吗| www.377336.com-185彩票天下| www.501331.com-天下彩l-| www.572925.com-快三预测彩乐乐| www.635950.com-七乐彩技巧大全| www.708810.com-男彩票托套路| www.787213.com-雪原足彩比分直播| www.863180.com-大乐透大彩网| www.929001.com-中彩网广西福利彩票| www.981742.com-彩票刷水套利软件| www.zl6.com-上海福彩快3| www.450576.com-游彩网官方首页| www.016288.com-博彩是什么意思| www.493733.com-开私彩平台-| www.662854.com-关于国彩-| www.515036.com-彩票系统云创| www.202240.com-贵阳福彩中心在哪里| www.292736.com-河南派彩网-| www.366478.com-福彩3d开奖33期| www.130.tv-彩票在线计划稳赢| www.3851.cm-似曾相识足彩| www.20505.cc-大发彩票靠谱不| www.116307.com-彩虹周杰伦吉他谱| www.93583.com-手机买快三能赢吗| www.58qb.com-福彩网购-| www.021293.com-彩票拉菲平台| www.09759.com-专业玩彩视频双色球| www.751052.com-彩八苹果下载| www.43mm.cc-喝彩人的意思| www.381201.com-七乐彩周末开奖吗| www.166901.com-江苏快三玩法| www.013547.com-南国彩网-| www.76je.com-彩票软件平台| www.yb95.com-派彩意思-| www.792.in-体彩竞彩开店| www.7281.top-画彩虹的图画小学| www.cai42.com-吉林体彩十一走势图| www.wv50.com-七乐彩杀号定胆必赢| www.44am.com-至尊博彩是什么意思| www.1365.cc-彩票有人真的中奖吗| www.777927.com-网上体彩投注app| www.353155.com-彩票聊天室整点红包| www.175926.com-快三稳赚技巧| www.026856.com-被五分彩骗了怎么办| www.852962.com-彩客化学戈弋照片| www.979173.com-好彩香烟多钱| 大众彩票www.976868.com| www.876005.com-大赢家时时彩彩票网| www.15289.cc-彩虹周杰伦-| www.675912.com-彩票三低基夲走势图| www.774148.com-彩票3d骗局-| www.895268.com-高频彩投资是骗局| www.971445.com-易彩票下载网址| www.cai907.cc-内蒙快三走势图| www.np39.com-在线模拟彩票摇奖机| www.04bn.com-福彩4码遗漏| www.11538.cc-乐乐彩app-| www.cai4411.com中国福彩快3图| www.pw07.com-大资本彩票网址| www.703778.cc-云南福彩怏乐十分| www.533855.com-福彩三d胆码| www.209879.com-买快三有挣钱的吗| www.682579.com-买足彩输到倾家荡产| www.972074.com-福建体彩网36选7| www.366012.com-浩彩怎么组词| www.98286.com-浚县王庄彩礼| www.670522.com-安徽10月竞彩促销| www.611447.com-长春彩吧-| www.204582.com-江西多乐彩开奖走势| www.hj43.com-博众彩票软件官网| www.635277.com-彩宝品牌排行榜| 大赢家彩票平台www.375781.com| www.973669.com-华彩娱乐登录| www.cp1248.com-江苏快三计划稳定网| www.175816.com-五分快三最稳定计划| www.pm49.com-福彩三字画谜| www.520442.com-m5彩票中心-| www.073490.com-彩票发财-| www.844061.com-千亿彩票软件| www.931088.com-大吉彩票app| www.976559.com-彩礼价格表-| 彩票3www.891085.com| www.ng62.com-中国足彩网首| www.540370.com-足彩吧是真的吗| www.657264.com-中国福利彩票消消乐| www.745778.com-成功彩票官网| www.814992.com-广州体彩快中彩开奖| www.889676.com-55561凤凰网彩| www.230811.com-湖南福利彩票网| www.327406.com-彩票资料大全wap| www.ry95.com-优信购彩大发快三|