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.cai4344.com快三胆拖玩法及奖金| www.s24.biz-彩票d-| www.61xq.com-彩38网投靠谱吗| www.1313.top-国乐彩刷钱-| www.28731.cc-cc彩球c红财神| www.78517.com-双彩网下载客户端| www.039198.com-彩票代投骗局揭秘| www.154456.com-彩票下载下-| www.253956.com-玩彩app-| www.333565.com-外卖送彩票违法吗| www.416966.com-福彩中心3d魔图| www.529368.com-体彩开奖直播平台有| www.654608.com-福彩截止时间| www.749205.com-陕西体彩购彩app| www.827132.com-500万彩网首网| www.903466.com-旧版九万彩票安卓版| www.973591.com-彩虹唯美图片| www.ov49.com-山西福彩前三走势图| www.3tx.com-中彩网号码分析| www.72pj.cc-福彩3d蓝精灵a| www.1516.cm-大彩网专家分析| www.00417.com-银川哪家彩票转让| www.58948.com-江苏快三怎样看走势| www.021276.com-竞彩足球彩票胜平负| www.101406.com-河北快3走势图彩| www.177396.com-百盈快三怎么看走势| www.279149.com-时时彩后三杀号一码| www.439163.com-悠悠小站足彩| www.536217.com-哪种彩票简单开奖快| www.637590.com-归纳色彩图片| www.731942.com-爱彩人-| www.809668.com-彩经彩票可靠吗| www.886726.com-体彩开奖直播视频| www.982383.com-新江时时彩开奖号| www.qj5.com-大马彩票开成绩| www.ra12.com-如何买彩票中奖率高| www.09ye.com-亿博彩票网址| www.83ky.com-彩票最稳投注方案| www.2483.vip-福利彩票出奖号| www.8398.bid-福彩独胆双胆预测| www.33856.com-彩票分析师培训班| www.79499.cc-重庆时时彩彩票投注| www.031585.com-体育彩票算赌博吗| www.109835.com-精英彩票心水讨论| www.181448.com-福彩快三赔-| www.257215.com-分分中彩-| www.331396.com-彩票二元网走势图带| www.413541.cc-特彩吧49gcc| www.517764.com-福利彩票奖池的比例| www.592194.com-幸福彩票官网| www.668572.com-高频彩种服务好| www.750116.com-掌上彩票苹果| www.821928.com-湖北精彩十分钟玩法| www.897025.com-快乐彩票大发快3| www.966563.com-宝马集团彩票网址| 如意彩票www.865657.com| www.kl27.com-易彩彩票是诈骗吗| www.j94.com-贵州体彩网专家页| www.45ff.com-快三新周易魔图公式| www.728.cn-时时彩追号助手| www.5015.mobi-购彩之家官网| www.03475.com-赌彩票能戒掉吗| www.048473.com-赢彩app下载| www.157623.com-体育彩票点球算不算| www.254530.com-快三和值跨度速查表| www.317136.com-喜乐彩历史中奖号码| www.387186.com-0818彩票app| www.596952.com-菲律宾大中华彩票网| www.661121.com-福彩15选五走势图| www.779307.com-五百彩票开奖公告| www.856784.com-十分钟开奖中国快三| www.923332.com-人人中彩票官网福彩| www.981038.com-七彩的意义-| www.pj03.cc-五百万彩票网网页版| www.0do.com-彩客电脑版本| www.59kz.com-彩钢板机械价格| www.0249.me-时时彩半顺杂六规律| www.8356.xyz-重庆十十彩开奖号码| www.34536.cc-激励买彩票的句子| www.79894.com-海南快三真的假的| www.029082.com-体育彩票快三内蒙| www.104480.com-竞彩足球兑奖规则| www.171959.com-5d彩票规则-| www.305573.com-买彩票的流程| www.376122.com-排三预测彩经网| www.505220.com-博友彩官网地址| www.570881.com-福彩15选-| www.639282.com-天津彩票站转让信息| www.741759.com-官彩是真的吗| www.810854.com-购彩骗局-| www.878414.com-福彩30选5结果| www.968391.com-时时彩盈利15万| 95彩票www.795335.com| www.hr19.com-中国福彩开奖公告| www.ye67.com-手机上买快三| www.18ei.com-云南彩王-| www.654.biz-圣地彩杀一码| www.4170.org-七彩国际影城爱建| www.9170.vip-彩赢注册平台| www.55388.cc-买时时彩盘-| www.97256.cc-甘肃快三电子图| www.060105.com-开型体育彩票知识| www.160066.com-那个彩票app靠谱| www.242477.com-英快三走势图| www.312009.com-七星彩财迷迷| www.376807.com-豪华彩票店装修| www.509587.com-3d和值彩宝网| www.579432.com-类似于七星彩的古言| www.653781.com-奔腾彩票12711| www.751600.cc-万利彩平台地址| www.817586.com-体彩大乐透开将结果| www.884727.com-浙江体彩十一选五| www.973352.com-冰彩虹-| 彩票500万www.596035.com| www.gu00.com-梦想彩票主页| www.wz95.cc-七星彩今天预测号码| www.17fr.com-老曾体彩-| www.481.live-微信彩票时时彩群| www.3930.xyz-中彩堂开奖报码室| www.8899.xyz-竞彩3串1中奖图| www.82500.cc-体彩排列三杀一码| www.028715.com-8828彩票登录| www.100111.com-聚彩jc下载-| www.157722.com-爱米彩票网站正常吗| www.264802.com-彩票显示屏-| www.340199.com-贵州省体育彩票业| www.411538.com-牛彩网3d精准杀号| www.506503.com-双色球最新彩迷天地| www.570444.com-好彩快三是怎么回事| www.635307.com-七彩本草滴丸| www.752744.com-玩彩票害死人| www.830257.com-快彩乐首页山东网| www.892608.com-旺彩娱乐会所| www.954170.com-七星彩开奖预测号码| 吉祥彩票www.jx68.com| www.yt0.cc-快乐彩票下载| www.of57.com-玩快三输了好几万| www.5ps.cc-体彩亿元大奖骗局| www.51qw.com-小班彩虹伞的儿歌| www.450.xyz-吉林快三投注| www.3481.org-中国体彩规则及奖金| www.8361.loan-霞光异彩是什么意思| www.25038.cc-48色彩铅色卡| www.60608.cc-安徽11选5爱彩乐| www.062560.com-境外黑彩洗钱| www.135081.com-快三追得倾家荡产| www.202284.com-贵州体彩网联系方式| www.261323.com-极速时时彩计划| www.358118.com-国外怎么破译彩票的| www.425455.com-宝赢彩票软件苹果版| www.514811.com-加盟彩妆品牌排行榜| www.574505.com-免费彩铃下载| www.633413.com-豫彩通官网-| www.690722.com-快开彩票时间调整| www.759210.com-冬马来彩-| www.876973.com-重庆时彩做假| www.956057.com-投彩票上分下分| www.990436.com-体彩排列三预测荐号| www.cp1126.com-彩票平台注册送19| www.kc59.com-彩票苹果版-| www.yk87.com-贵阳福彩官方网| www.12hp.com-海南七彩票开奖结果| www.72gj.com-博彩搭建一条龙| www.0350.bid-张丽花式快三数学|