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.128470.com-500万彩软件| www.349233.com-彩票2345-| www.884184.com-黑客攻击彩票网站| www.08518.com-非凡彩票官方网站| www.022072.com-购物送彩票合理么| www.75qi.com-下彩最手机开彩网| www.2434.cc-导师带玩彩票| www.06uk.com-二年级传统彩铅画| www.123701.com-凤凰彩票玩的人多吗| www.085481.com-刘大军中彩网| www.8107.loan-吉林快三作弊软件| www.159163.com-福利彩票走试| www.247422.com-大发快三有假吗| www.331290.com-湖北快三遗漏值数据| www.411632.com-ios12原彩修复| www.527674.com-时时彩猜数字规律| www.017286.com-鼎盛时时彩平台登录| www.098857.com-优彩彩票骗局揭秘| www.8sc.com-港澳生肖彩在线| www.894874.com-福利彩票群-| www.979451.com-彩票白菜送彩金| www.az1.cc-新浪足球彩票| www.67989.cc-网络彩票输死怎么办| www.235373.com-福彩晓艳之声| www.322294.com-彩民网高手论坛| www.882882.com-彩票内部人员透露| www.627500.com-彩票5000万网站| www.688430.com-广东福彩下载| www.585096.com-256买彩票官网| www.727081.com-明彩-| www.879822.com-赢彩网真的能赚钱吗| www.512636.com-秋天的景色彩铅画| www.591987.com-分分彩刷流水思路| www.670512.com-体彩竞彩比分新浪| www.755269.com-河南幸运彩手机网址| www.830120.com-必赢彩票百盈快三| www.906032.com-浙江省福彩网官方| www.974412.com-手机彩票那个合法| www.cai3011.com二分快三开奖号码| www.325838.com-6合和彩今天资料| www.381602.com-本人玩时时彩5年| www.491287.com-东方彩大发技巧| www.608982.com-优选彩票平台| www.tb53.com-快三和值对照表| www.666145.com-有没有玩彩票挣钱的| www.405321.com-七星彩能网上购买| www.96md.com-非常准的高频彩计划| www.862278.com-k彩手机版下载安装| www.996713.com-彩票站app手机版| www.028368.com-百度彩票大乐透杀号| www.182803.com-桂快3彩票怎么玩| www.475644.com-多赢彩票提現| www.873888.com-彩票平台架设教程| www.204.me-环彩网怎么打不开了| www.59180.com-瑞祥彩云苹果下载| www.051877.com-9万彩票下载地址| www.921824.com-湖南彩礼-| www.cp3135.com-新快三单机游戏下载| www.ok06.com-长沙体彩-| www.039879.com-广东怎么没有快三| www.106776.com-今晚上体彩开什么码| www.500351.com-好好彩票-| www.3500.me-注册彩票送钱| www.82mo.com-河北快三50期| www.00195.com-双彩网预测-| www.003708.com-有没有玩彩票的平台| www.075049.com-幸福彩官网-| www.160515.com-福彩中心上班时间| www.2555.live-彩票预算下期| www.235431.com-微彩娱乐app下载| www.910751.com-利民彩票网址| www.973846.com-大奖网可以买彩票吗| www.tg.cc-体彩和值尾走势图| www.tt71.com-足球彩票店app| www.13oe.com-中彩那天试讲视频| www.3026.vip-体彩今天开奖号码是| www.025604.com-彩票对刷套利骗局| www.464027.com-三d双彩网走势图| www.060218.com-天天彩选四历史号码| www.75vb.com-体彩六码组六遗漏| www.6174.biz-红旗彩票软件| www.88979.com-连中彩票王-| www.35398.com-快三微信群交流| www.88mu.com-家彩搜索福彩3d| www.467811.com-体育彩票七位数下期| www.20gt.com-足彩360任选九| www.347686.com-添光溢彩的意思| www.744.cc-时时彩猜数字| www.7664.xyz-时时采彩宝典安卓版| www.58957.com-七星彩彩票投注方法| www.084465.com-快彩app浙-| www.5898.me-彩票哪里买-| www.815212.com-下载旺彩3d-| www.911783.com-即开彩app骗局| www.978504.com-开发彩票马甲犯法| www.hm07.com-旺彩双色球下载| www.n56.pw-福利彩票最大奖| www.45sd.com-彩虹太阳能无人机| www.109621.com-时时彩挂机软件苹果| www.237457.com-中国足彩网旧版| www.731058.com-足球彩票盈亏技巧| www.850198.com-qq分彩全天计划| www.957043.com-福利彩票2044期| 博汇www.862870.com| www.083146.com-新浪彩票名家| www.rx58.com-q彩分分快三| www.9nm.com-谁有微信足彩| www.68827.com-132彩票网页版| www.82rm.com-国彩吧网-| www.2327.org-重庆时时彩是多少期| www.2935.biz-qq30秒彩开奖号| www.080077.cc-梦见彩票中大奖| www.932229.com-上和彩票靠谱么| www.528795.com-豪赢买彩票靠谱不| www.657490.com-体彩大乐透开多少号| www.827036.com-七星彩犯法吗| www.899000.com-美团彩票自助售票机| www.962218.com-快三造假-| www.qu8.cc-福彩三弟走势图| www.a48.club-明版彩票资料全| www.01635.com-易彩网一分快三| www.492307.com-甘肃快三彩票走势图| www.581214.com-淘宝彩票在哪里进去| www.662412.com-全民彩票3d-| www.781542.com-优游彩票怎么样| www.50kh.com-诚信可靠的足球彩票| www.609409.com-彩558彩票-| www.675359.com-福宏彩票是真的吗| www.cp9196.com-中彩彩票平台| www.180115.com-大中华彩票1分快3| www.340633.com-乐透乐牛彩网网| www.22759.cc-微信怎么买3d彩票| www.196345.com-360彩票手机版| www.265599.com-福利彩票快3咋玩| www.387018.com-大发快三中奖截屏| www.473955.com-彩票投注网-| www.556638.com-网上买彩500| www.844226.com-体彩中心改革国企| www.097215.com-体育彩票公益| www.770613.com-中阿彩票-| www.866698.com-268彩票网-| www.936072.com-竞猜足彩规则| www.981847.com-七星彩在线缩水工具| www.cai8555.com彩神大发快三| www.ig90.com-福彩3d88对应几| www.964279.com-500w彩票-| www.71983.com-雅彩app-| www.191596.com-彩经网-| www.990835.com-最好的彩票挂机软件| www.ye27.com-大发快三中奖图片| www.82cy.com-体彩大乐透哪里领奖| www.677742.com-微彩娱乐28-| www.50723.com-时时彩最赚钱的打法| www.140080.com-基诺型彩票破解| www.166130.com-内蒙快三走势图今天| www.05wd.com-水彩漆十大品牌| www.355874.com-玩网彩输了一万| www.405285.com-七星彩复式按顺序吗| www.234831.com-福彩3d跨-| www.082295.com-好运彩彩票网可靠吗| www.152586.com-uu快三代理-| www.9656.biz-福彩试机号乐彩网| www.302517.com-中国福彩3d和制图| www.365200.cc-玩彩票怎样才能赚钱|