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.790030.com-青海省福彩中心电话| www.58715.com-中国彩吧图纸| www.023742.com-最新正版彩票指南报| www.111877.com-福彩代购-| www.216280.com-生肖彩票玩法| www.314914.com-时彩怎么玩-| www.402616.com-彩票幸运号码推算| www.529162.com-彩票六壬-| www.619287.com-体彩卫视-| www.753344.com-安装彩钢活动房| www.833341.com-3b福彩彩报-| www.919180.com-如何搭建彩票网站| www.986868.com-彩客网开挂-| www.qo90.com-一分快三有哪些规律| www.898640.com-彩民乐钱图-| www.70bh.com-害人的体彩1l选5| 爱彩乐www.342918.com| www.392059.com-福利彩票一二三等奖| www.kt43.com-福彩十分钟交流群| www.j24.tv-今晚福彩是否开奖| www.66ag.com-乐和彩wap-| www.2200.online福利彩票快乐三分| www.9121.biz-今天双彩图谜专区| www.679010.com-中福在线视频彩票| www.632537.com-3d彩票出多少号| www.081006.com-彩票77网站被骗| www.46453.com-下载时时彩宝典老版| www.068978.com-手机彩票模拟器| www.281755.com-e球彩3场全包奖金| www.521507.com-中国体育彩票招聘| www.680672.com-体彩彩票店害人| www.985.org-彩票平台哪个靠谱| www.31711.cc-和彩云是什么收费吗| www.187851.com-时时彩改为20分钟| www.338925.com-福彩体彩藏机图全部| www.590782.com-天下彩票天下彩网| www.803528.com-体彩6十l开奖号码| www.505729.com-福彩新版公益诗| www.762693.com-彩票北京拾-| www.8626.cc-我中啦彩票网关停| www.433559.com-彩民周刊官方下载| www.lj16.com-彩票app加奖| www.024473.com-江西福彩玩法介绍| www.039916.com-彩天下6263cc| www.458.tv-河北快三和值技巧| www.36582.cc-澳门彩票手机投注网| www.275912.com-各种釉彩大瓶的历史| www.676361.com-明天体彩开奖号码| www.875094.cc-酷彩吧彩票下载| www.is19.com-微彩彩票合法吗| www.cai3453.com时时彩高手方案| www.180488.com-一分快三骗局| www.344399.com-国乐彩苹果下载| www.648009.com-彩票339-| www.53dd.com-下载爱乐彩票网| www.302023.com-彩经网大乐透预测| www.2408.com-众彩之家-| www.74sp.cc-长沙彩票店转让信息| www.6987.cn-七星彩重奖规则| www.65905.com-手机彩票模拟机选| www.122204.com-下载乐彩vip官网| www.354418.com-乐彩网排列5预测| www.325770.com-江苏快三未出号| www.930778.com-新加坡南洋彩资料| www.100028.com-网上哪里能买彩票| www.079557.com-竞彩篮球玩法| www.682549.com-福彩3d彩报网| www.030891.com-中国福利彩票中奖| www.08dq.com-体彩开机号今天晚上| www.688260.com-福利彩票关注公众号| www.3hc.com-彩票软件为什么停售| www.868887.com-今日7星彩预测号码| www.va36.com-越南时时彩下载| www.o29.com-分分彩计划app| www.63424.com-福利彩票365下载| www.652812.com-重庆时时彩平刷玩法| www.750598.com-中彩在线提现提不出| www.838973.com-杭州彩色包装箱厂| www.921596.com-今日青海快三走势| www.cp049.com-福彩江苏快三走势图| www.qv75.com-地区快三是真的吗| www.11xh.com-合肥体彩中奖| www.97ft.com-排练跟彩排的意思| www.055219.com-怎么劝沉迷彩票的人| www.869587.com-幸运中彩票平台骗局| www.586200.com-微彩吧苹果下载版| www.86oo.com-3d乐彩开奖信息| www.953073.com-快三算号库-| www.s16.org-体彩排列三开机今天| www.20xv.com-买什么彩票可以赚钱| www.37159.cc-好运来彩票在线| www.122570.com-彩世界下载-| www.260869.com-吉利彩票网提款被拒| www.433241.com-华人彩手机官方网站| www.621964.com-688彩票网-| www.867152.com-体彩六码最大遗漏| www.09201.com-四季彩可以提现吗| www.013136.com-海南七星彩千军万马| www.400604.com-七星彩第四位走势图| www.507659.com-遇见彩虹的说说| www.587152.com-保定福利彩票站| www.675613.com-千亿彩票是黑平台吗| www.807556.com-福彩怎么守号| www.880924.com-内蒙福彩官方网| www.978640.com-c彩61软件-| www.yf62.com-中国体彩七星彩历| www.95728.com-彩票不蒙面领奖| www.131455.com-河南安阳彩礼多少| www.387888.com-下彩彩票安卓| www.064708.com-什么彩票平台稳定| www.450249.com-七星彩真能中奖吗| www.605855.com-最新彩乐园-| www.46358.com-福彩彩票机保障| www.052923.com-买彩票就这几招下载| www.199371.com-二分快三同号计划| www.303307.com-七彩云集团有限公司| www.377086.com-京彩e账户app| www.476777.com-支付宝的彩票| www.572913.com-完整版足彩比分直播| www.699181.com-体彩大乐透手机投注| www.974573.com-好运来彩票平台| www.95dw.com-今天体彩排三预测| 计划稳定版-dd彩靠谱不-| www.622988.com-福彩双色球奖金查询| www.5qt.com-体彩亿元大奖排名| www.id68.cc-彩神vlll-| 大赢家彩票www.5086n.com| www.474374.com-腾讯分分彩大底号码| www.hf24.com-玉林福利彩票中心| www.23272.cc-彩神x合法吗| www.552212.com-江西快3爱乐彩| www.332693.com-京彩江苏快三| www.614186.com-何氏彩票-| www.759320.com-大中华彩票推荐| www.919070.com-中国最好的黑彩平台| www.cai5157.com幸运快三规则| www.807673.com-彩票大叔-| www.cp2788.com-福彩五分快三邦投| www.316758.com-新浪体彩走势图表| www.773705.com-时时彩单式做号技巧| www.vo14.com-时时彩三十六期长龙| 双龙娱乐www.sj119.9slyl.com| www.042597.com-彩票业务员拉人话术| www.919711.com-彩票系统定制| www.77517.cc-赢彩网骗局-| www.882743.com-体彩外围怎么投注| www.77352.com-955彩票规律| www.303528.com-好彩票官网下载软件| www.446368.com-体彩3d开奖号| www.613052.com-旺旺彩票网站| www.773882.com-360彩票时时彩| www.968164.com-上海福彩快3结果| www.28ev.com-491彩票直播| www.046247.com-快三有几种玩法| www.204678.cc-江西省体彩兑奖地址| www.331386.com-全国彩票计划网| www.428918.com-唯彩双色球推荐号码| www.613657.com-彩票走势模拟投注器| www.750082.com-七星彩4个号多少钱| www.888032.com-派彩走势图下载| www.111915.com-9亿彩票是真是假| www.181216.com-中彩网合法吗| www.253275.com-彩票456-| www.329009.com-3b福彩正版藏机图|