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天

知道了
9彩注册 www.616198.com-体彩单式票开奖查询| www.169028.com-新时时彩组六胆拖| www.317903.com-广东十分彩开奖结果| www.40695.com-瑞彩祥云幸运快三| www.885831.com-567彩票手机乐园| www.03lk.com-足彩投资宝典pdf| www.013402.com-南国彩票开奖结果| www.578559.com-九万彩票旧版首页| www.917704.com-彩虹世界app下载| www.956098.com-买彩票的男人能要吗| www.cai876.com-快三口诀逢3下15| www.598134.com-竞彩任选九场| www.706763.com-辽宁全运彩十一选五| www.793106.com-玩福彩快三能赚钱吗| www.98610.com-足彩全包-| www.903560.com-星光彩票正规的吗| www.444732.com-天中图库一福彩3d| www.zn41.com-吉林快三撒时候开始| www.234006.com-新版微信如何买彩票| www.58315.cc-体彩7星彩开奖号码| www.592997.com-彩虹6号ipad| www.702389.com-靠谱的网彩-| www.900388.com-福利彩票买大小| www.999604.com-152彩下载-| www.23rn.com-球球大作战七彩月饼| www.362031.com-广州福彩快乐十分中| www.201224.com-盛大彩票平台可靠吗| www.250307.com-甘肃快三中奖金额| www.375885.com-去柬埔寨做博彩客服| www.528161.com-快三导师带计划| www.611376.com-网吧有彩虹六号吗| www.664832.com-中国福利彩票39期| www.835554.com-大赢家足彩过滤软件| www.921312.com-福利彩票自动售卖机| 500彩票www.51515i.com| www.752930.com-重庆彩票网手机报| www.403.com-爱彩网手机版下载| www.009510.com-彩票平台首页| www.ja80.com-竞彩足球比分结果| www.1892.cc-福彩3d太上老君| www.06336.com-亚投计划彩神| www.251353.com-香港中彩彩票| www.b24.pw-福彩燕赵风采排列7| www.6108.vip-足彩倍率的计算公式| www.33017.com-福建彩票网走势图| www.31td.com-生肖快乐彩票| www.0919.xyz-87彩店客户端下载| www.573239.com-直播彩播啥意思| www.yg32.com-派彩电子官网| www.580489.com-快彩票下载安装| www.678215.com-福彩d取独胆文章| www.769182.com-伯爵彩票全天计划| www.846422.com-讲彩票-| www.931028.com-稳赚彩票视频| 158彩票www.16055.com| www.844807.com-福彩福利彩票| www.932132.com-七星彩中三个号间接| www.995047.com-五百万彩票网址| www.go88.com-河南彩票双色球| www.xv26.com-山西彩票-| www.34lg.com-刚开的七星彩| www.082423.com-118彩票可信吗| www.153792.com-中国足彩馆踩踏原创| www.235897.com-足彩即时欧赔| www.845407.com-体育彩票成立日期| www.912585.com-时时彩计划网站在线| www.973672.com-卓易彩票app下载| www.cai3311.com三分快三是不是真的| www.122271.com-彩民论坛74849| www.203055.com-湖北福彩网官方网站| www.275300.com-时时彩怎么刷漏洞| www.358800.com-体育彩票买几位数| www.762775.com-小捣蛋走势图时时彩| www.844121.com-体彩改制企业| www.900591.com-彩吧图库第一版应用| www.960807.com-七星彩历年开奖查询| 大玩家彩票www.84499p.com| www.ed03.com-百姓彩票安全吗| www.tk38.com-大乐透开奖彩票网| www.wl51.cc-江苏体彩开奖| www.566112.com-pp彩票是真的假的| www.680786.com-彩票讨论微信群| www.751747.com-中彩江苏快三| www.816112.com-湖北快三娱乐| www.879371.com-福利体彩分类| www.944818.com-248彩票平台下线| www.988712.com-中彩手彩票大全| www.wr9.cc-乐彩三d17500| www.935488.com-彩神机器-| www.10az.com-彩票摇奖造假视频| www.97tc.com-炫彩边框壁纸图片| www.751.red-时时彩后二复式组选| www.438825.com-营业中体彩店急转| 500彩票网www.911209.com| www.98770.cc-订婚退婚彩礼法律| www.179569.com-今日甘肃快三走势图| www.261422.com-彩票源码搭建一条龙| www.332258.com-33彩票是黑平台吗| www.400044.com-福彩双色球技巧规律| www.526981.com-竞彩足球中奖查询| www.ct69.com-私彩单双-| www.755428.com-亚洲杯足彩分析| www.302.site-买彩票赔多少钱| www.3769.cc-贵宾室彩票网页版| www.444555.cc-我查查彩票-| TT彩票www.526071.com| www.ze64.com-彩票33手机app| www.009586.com-好看的手机彩膜图片| www.68785.com-快三最高多少期不中| www.315196.com-怎么时时彩才能赚钱| www.822161.com-快三出豹子后出什么| www.yf29.com-派彩481-| www.9358.bid-福利彩票机构职能| www.568456.com-微彩怎么玩-| www.707781.com-9度彩票-| www.864805.com-筛子彩票玩法| www.13nv.com-辽宁体检彩11选5| www.882.red-彩铅手绘风景画| www.087524.com-开个福彩店赚不赚钱| www.207112.com-五分快三计划网址| www.068444.com-彩票开发定制| www.588957.cc-福彩网充值网址| www.678984.com-众购彩票网注册登录| www.753520.com-彩12彩票苹果版| www.809686.com-955彩票能赚钱吗| www.879770.com-甘肃快三开奖| www.936270.com-彩票彩客app| www.977543.com-吉利彩票怎么玩| www.kb5.com-分分快三计划数据| www.ps33.com-933彩票苹果版本| www.x76.club-棋牌彩票排名| www.45pj.cc-彩虹六号周边| www.1461.vip-福乐彩玩这个安全吗| www.8483.cn-魔方彩票骗人的| www.823907.com-三彩加盟电话| www.618333.cc-咸阳市福彩中心地址| www.947175.com-彩票开奖双色球开奖| www.899469.com-微信彩神通代理三码| 博友彩www.979233.com| www.98242.com-大奖分分彩规律| www.8816.date-亚博科技彩票| www.45436.com-时时彩彩票投注平台| www.85055.com-福彩主任贪二千亿| www.031557.com-下彩彩票网址| www.095820.com-中福彩国际文化| www.137939.com-中国彩票最大奖排行| www.389195.com-长春溢彩洗浴| www.hs72.com-快三赌博大小单双句| www.xi09.com-7彩国际是不是假的| www.10de.com-彩之云平台-| www.65wb.com-博彩赚返水-| www.864226.com-代玩彩票兼职微信号| www.928849.com-算局七星彩奖表软件| www.983230.com-彩93是黑平台吗| www.9zd.com-体育彩票一共多少号| www.68ex.com-地球纪元彩虹之门| www.33830.com-福彩3d高概率秘籍| www.rv53.com-腾讯彩票合法吗| www.dj1.com-黑桃k时时彩可靠吗| www.351880.com-体彩投一注是多少钱| www.397764.com-如何用彩铅画花| www.633493.com-彩票310什么意思| www.773763.com-战胜时时彩概率| www.948053.com-广东省体彩福彩开|