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.634588.com-利博彩票骗局| www.029819.com-香港福利彩票网站| www.463696.com-万豪彩票怎么样| www.98760.com-360彩票竞彩足球| www.222214.com-体育彩票快乐十分钟| www.29kp.com-028期彩票-| www.262616.com-欢乐快三骰子| www.475151.com-金誉彩票网络投网| www.950933.com-捷报网足彩预测| 500万彩票www.04500w.com| www.617289.com-彩票公众号官网| www.956078.com-私彩单挑-| www.28952.com-彩票被洗了还能兑奖| www.227940.com-彩票查询七星彩| www.006566.com-好彩1预测广东| www.111818.cc-彩平台送彩金| www.189924.com-安徽快三开奖源| www.mg.com-腾讯快三计划| 吉利彩票www.80065m.com| www.rl46.com-十分彩的江苏快三| www.51no.com-王中王彩博-| www.156992.com-北京福彩论坛3d| www.68358.com-女人梦见别人中彩票| www.7184.biz-彩票扣税计算方法| www.388013.com-87彩票店邀请码| www.485940.com-足彩开奖时间每天| www.755364.com-旺彩网大乐透网址| www.933117.com-众信彩票黑平台| www.990682.com-竞彩让平规律| www.jn22.com-怎么破解私彩网站| www.14jp.com-百盈快三和直播吧| www.03971.com-下载豪彩娱乐账号| www.266103.com-河北燕赵福利彩票| www.376718.com-必赢彩票官网app| www.510748.com-超长高级彩虹屁范本| www.616542.com-体彩365下载| www.756024.com-好彩吧特彩网| www.845856.com-体彩类型-| www.919606.com-赢彩王最新版| www.999941.com-中国福彩双色球时间| www.hh83.com-幸运中彩票下载| www.566743.com-彩票大只500登录| www.654120.com-互娱彩票下载abb| www.725873.com-福利彩票规则中奖规| www.805882.com-风云彩票a版| www.887359.com-发彩快三计划| www.961821.com-可以购彩票软件| www.c4.gg-上海快三奖金规则| www.xg72.com-七星彩2元网| www.65om.com-齐鲁福利彩票| www.1667.wang-时时彩缩水做号软件| www.535689.com-想中彩票暴富| www.670487.com-七星彩推荐号汇总| www.762276.com-一赔一彩票平台| www.829992.com-娱乐游戏首存送彩金| www.893950.com-手机旺旺彩票正规吗| www.955500.com-足球彩票排行榜| 500万彩票www.w095.com| www.bd58.com-快三安徽开奖走势图| www.qp04.com-江苏快三官方彩| www.u25.com-深圳彩票中心官网| www.30649.com-新浪爱彩机选双色球| www.pc94.com-河北省彩票11选5| www.179055.com-江苏快三靠谱吗| www.270131.com-132彩票安卓版| www.357577.com-合股买彩票协议| www.466406.com-新加坡快三怎么玩| www.815083.com-山东体彩手机版官网| www.050408.com-彩票黑彩取不出来钱| www.215501.com-彩1彩票-| www.331574.com-乐彩网注册官网| www.404561.com-彩铅画基本工具| www.529602.com-现场直播的彩票| www.619374.com-刀客足彩解盘博客| www.644749.com-体彩11选5计划| www.833760.com-好彩丨开奖查询| www.970970.cc-中彩票之前的梦境| www.cu95.com-加盟彩票店要多少钱| www.y15.com-福利彩票87期| www.155408.com-春秋彩票是正规的吗| www.79af.com-体彩和值带线走势| www.525555.com-重庆福彩官网电话| www.28gx.com-手机336彩下载| www.40kf.com-慧彩国际-| www.69488.com-足彩稳定盈利计划| www.039091.com-在爱投买彩票安全吗| www.377389.com-qq彩票下载app| www.690265.com-赛车pk10赢钱彩| www.790479.com-2019好彩一推荐| www.751419.com-红彩彩票邀请码| www.570900.com-清蛙彩票-| www.176510.com-快三高手经验心得| www.306000.cc-江苏褔利彩双色球| www.649897.com-博彩中介干什么的| www.918869.com-体育彩票模拟机选| www.1859.xyz-3走势图彩吧助手| www.288348.com-广东爱彩乐-| www.144606.com-彩票网址大全下载| www.478064.com-工行积分怎么换彩票| www.632492.cc-福利彩票店1| www.6684.com-567彩票太坑爹了| www.026849.com-彩八彩票官方下载| www.158707.com-彩迷彩票-| www.287257.com-福建体彩31开奖号| www.358977.com-七星彩生日姓名选号| www.271663.com-好彩1玩法介绍| www.21662.cc-北京福彩网彩民之家| www.566982.com-彩票网站定制| www.887631.com-买彩票11选五心理| www.903232.com-中国福彩22选5| www.9416.cc-福建福建体彩网| www.727105.com-彩票7乐彩-| www.9353.org-福利彩票造假新闻| www.654267.com-彩票要怎么买才能中| www.093281.com-北京中彩快印| www.166956.com-福彩快三是什么意思| www.232709.com-上海快三最好的技术| www.506644.com-乐彩手机静态版| www.354688.com-富彩家彩票平台好吗| www.499048.com-出售时时彩私彩网站| www.582468.com-京彩集团彩票| www.666063.com-中航彩虹股票| www.733966.cc-博众时时彩手机| www.794655.com-彩票端app邀请码| www.874155.com-3d彩民乐树图| www.935001.com-体育彩票电视怎么调| 公益福彩www.gyfc2.com| www.9656.biz-福彩试机号乐彩网| www.45085.com-体彩提成是多少| www.iw83.com-乐米彩票app下载| www.30121.com-中国体彩网点查询| 日彩网www.rcw789.com| www.mp63.com-网络福彩快三合法吗| www.063855.com-时时彩送彩金28| www.cai56.cc-快三彩票-| www.6kk.com-彩票全能计划王| www.823.in-专业玩彩福彩分析| www.6391.cn-邮政储蓄彩票定投| www.23189.cc-旭彩彩票在线平台| www.022646.com-新2彩-| www.104078.com-玩北京快三输十多万| www.362687.com-彩虹和倒带歌词对白| www.448661.com-中国彩票是合法的吗| www.16nm.com-宝马彩票彩种| www.85rb.com-足彩如何看拉力| www.485581.com-怎么买6盒彩| www.5321.xyz-头奖彩票开奖| www.14655.cc-体育彩票国庆放假吗| www.70068.cc-体彩太湖三字诀| www.19236.cc-彩票领奖带银行卡吗| www.69232.com-众搏彩票-| www.015309.com-巨丰彩票包网公司| www.071254.com-腾讯彩票招聘| www.397442.com-竞彩足球一定牛推荐| www.505978.com-彩票杀人-| www.79sz.com-彩票2元网首页3d| www.fr77.com-中国体彩网官方网站| www.136869.com-下载788彩票网| www.216383.com-极速快三怎么玩赢钱| www.315448.com-重庆市彩时害人| www.392168.com-牛蛙彩票36码| www.062494.com-在线u9彩票-| www.282727.com-彩99苹果版下载| www.377075.com-结婚前因为彩礼吵架|