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天

知道了
彩票123现在叫什么名字 www.809651.com-好彩客下载苹果| www.23ih.com-彩票代玩工资日结| www.017780.com-彩票投资计划| www.134226.com-中彩网首页彩票| www.612706.com-3b彩票-| www.79uk.com-无锡福彩双色球| www.550190.com-福彩群英会开奖号码| www.087381.com-福利彩票号码| www.01847.com-十分彩江苏快3| www.513134.com-郑州乐彩科技| www.679510.com-彩经彩票走势图| www.074498.com-金彩网app-| www.214191.com-约彩-| www.250.link-彩钢门图片-| www.866773.com-快三挂机工具| www.lf53.com-爱彩app下载| www.082015.com-中彩网彩民论坛| www.529.site-好运来彩网-| www.491949.com-福彩天中图库首页| www.393975.com-3位数的彩票是什么| www.726177.com-大发彩票计划网| www.355503.com-网上哪里买彩票| www.232491.com-微彩网是真的吗| www.241529.com-中彩吧骗局-| www.329499.com-人人购彩票是否安全| www.83of.com-大乐透彩票兑奖时间| www.9tp.cc-微博没有彩票| www.0430.org-我的福彩-| www.593078.com-航天11院彩虹公司| www.691869.com-彩票双色球机选模拟| www.978844.com-36好彩一预测| www.735271.com-b2彩票-| www.225809.com-瑞彩网官网-| www.327833.com-中彩吧更懂彩民| www.428499.com-种彩360-| www.536184.com-彩票类游戏经营| www.661477.com-重庆时时彩暂停时间| www.746900.com-大彩网七星彩第一位| www.819534.com-体彩机额度-| www.892076.com-老彩民投注平台网站| www.960342.com-好运彩彩票网可信吗| 彩多多www.78949u.com| www.242987.com-官方彩票投注软件| www.576007.com-如意彩票开奖| www.49sl.com-一分快三和值表| www.6373.cm-3d福彩论坛杀尾| www.bb96.com-爱彩通-| 创世纪彩票www.36787b.com| www.536390.com-数字型彩票分析| www.654764.com-青海快三中奖技巧| www.802639.com-3d的彩界小少爷| www.915856.com-开福利彩票店怎么样| GO彩www.gu64.com| www.735129.com-时时彩口诀大全图解| www.58264.com-彩票助手小程序| www.154422.com-买彩票赚钱可靠吗| www.057853.com-福建快三今日推荐| www.281282.com-足彩今日推荐竞彩| www.320356.com-百宝彩用户登录| 七星彩票www.22qxc.com| www.101109.com-捷报网足彩预测| www.004854.com-双色球彩票33| www.976126.com-安阳地区彩礼| www.87796.cc-彩票站有假的吗| www.243444.com-河南省福彩中心兑奖| www.345910.com-山东福彩开奖| www.47ni.com-9968彩票手机版| www.11682.cc-彩乐汇app下载| www.0452.net-彩网cai5登录| www.735819.com-彩票分析师工作| www.002313.com-时时彩个位规律口诀| www.672228.com-体彩刮刮乐贴吧| www.597337.com-网络彩票黑吃黑| www.753705.com-搜狗彩票无法提现| www.293235.com-河南福利彩票网站| www.400820.com-七星彩今天试机号| www.552809.com-北京福彩赛车高频彩| www.628844.com-广州好彩酒家宴会| www.693653.com-lg传统彩-| www.763396.com-体育彩票店有前景吗| www.828426.com-彩16下载app| www.887632.com-十一选五彩票能买吗| www.955850.com-彩影软件-| 明星彩票www.cp67.cc| www.5700.vip-卖彩票的地方| www.343418.com-软件买彩票赚钱| www.446322.com-彩票最新-| www.526644.com-私自贩卖彩票| www.874.mobi-玩彩票几期不中止损| www.230012.com-上海体育彩票网官网| www.667990.com-福利彩票窝腐| www.732600.com-彩礼和嫁妆返还比例| www.796902.com-竟彩官网-| www.869070.com-教你七星彩公式| www.929883.com-七星彩版面-| www.987504.com-玉林市体育彩票加盟| www.pd1.com-吉林快三和值走| www.503789.com-百度彩票还能用吗| www.619670.com-双色球彩票图片大全| www.738208.com-金彩网是坑人的吗| www.867540.com-福彩谜语-| www.967028.com-彩票计划群反倍投| www.bn02.com-人人爱彩票下载安装| www.q45.cc-广西快三玩法| www.08vy.com-高频彩计划手机软件| www.2555.cx-买彩票的图片| www.017612.com-彩票印象客服| www.813146.com-福彩十二选52选五| www.895531.com-2343cc天彩下| www.963850.com-足球彩票这么玩| 亚洲彩www.68568s.com| www.ju53.com-彩票计划官网| www.2035.net-青岛体育彩票| www.788963.com-竞彩推荐专家| www.883224.com-鸿彩网登录入口| www.862.biz-快三开奖中心藏宝阁| www.8552.net-中国竞彩网冠亚军| www.008699.com-彩客网提款提不出来| www.41699.com-速赢彩计划-| www.693251.com-辽宁福彩网投注指令| www.77794.com-福彩双色球怎么玩法| www.079631.com-福利彩票6加1规则| www.151370.com-乐彩网软件下载| www.232495.com-足彩十四场对阵表| www.969012.com-替别人刷彩票犯法嘛| www.w74.cc-久久彩票平台客服| www.663793.com-重庆时彩包赚直选法| www.84865.com-彩圣福彩三d字谜| www.388090.com-华彩谢茂全简介| www.417577.com-广州体彩网唯一官网| www.571337.com-玩网络快三违法吗| www.678457.com-福彩3d专家总汇| www.818610.com-腾讯分分彩对子规律| www.925400.com-体彩胆码家彩网| www.76si.com-七乐彩开奖直播直播| www.7471.com-七星彩即时开奖| www.40569.com-能提现的彩票网站| www.012773.com-手机摇彩票-| www.8215.biz-玖富彩票江西快三| www.00sk.com-彩虹和倒带歌词对白| www.898765.com-广东体育彩票中心| www.7298.cn-重庆时时彩做号安卓| www.09ut.com-彩票平台推广2维码| www.398517.com-七星彩一次可买几期| www.454230.com-体彩14-| www.90509.com-彩票彩虹店铺二维码| www.489477.com-彩票套利赚钱| www.661324.com-体彩三十一选七走势| www.738944.com-天津所有彩票大奖| www.21795.cc-天天签到存款赠彩金| www.049813.com-下载湖北精彩十分| www.938893.com-快三开奖作弊器| www.132427.com-彩礼规定不能超多少| www.6301.pw-新型隔热防腐彩铝板| www.119374.com-福彩3d倍投怎么样| www.056533.com-网上哪个平台买彩票| www.705011.cc-爱彩乐江苏-| www.oq11.com-彩票纸回收用途| www.657087.com-福彩游戏机怎么赢钱| www.694.me-鸿运来彩票登陆官网| www.089035.com-休彩票-| www.174618.com-谁有稳定的快三平台| www.947042.com-体育彩票高频彩审批| www.802591.com-中彩彩票怎么销户|