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天

知道了
1分快三 www.10674.com-668彩票账号登陆| www.9937.in-一定牛彩票网提现| www.3227.cc-123彩票怎么回事| www.29176.cc-手机上咋买彩票| www.008340.com-在网上买彩票犯法吗| www.122616.com-彩神512i喷绘机| www.225755.com-彩计划-| www.377140.com-腾讯彩票计划网址| www.640293.cc-新浪爱彩怎么下载| www.754668.com-彩票中数字规律题| www.841305.com-烟台福彩中心主任| www.916994.com-长沙快三彩票| www.980740.com-彩票资质-| www.cp9660.com-今日中彩下载| www.567463.com-彩虹六号无人机花屏| www.764200.com-928彩票网-| www.151355.com-彩漂剂效果好吗| www.236102.com-足彩14直播-| www.157505.com-皇冠足球竞彩app| www.545849.com-线上彩票在哪里买| www.29766.com-公益福彩app下载| www.800061.cc-3d彩票-| www.cp849.com-快三开奖预测软件| www.63em.com-哪个平台能卖彩票| www.177674.com-一分快三计划群| www.299219.com-体彩排三排五开奖号| www.983420.com-时时彩万位必中规律| www.11ac.com-时时中彩票公平公正| www.610268.com-怎么样从网上买彩票| www.63623.com-福彩三天计划的| www.786153.com-广西福利彩票七乐彩| www.061067.com-六壬测彩票如何取数| www.203169.com-体彩p3-| www.95352.com-中国福利彩票销售点| www.189289.com-下载内蒙古快三| www.288783.com-江苏快三倍投技巧| www.404429.com-吉林快三几号停| www.53376.cc-上海彩虹冰淇淋机| www.264055.com-e乐彩登录手机版| www.398665.com-网络彩票兼职代打| www.150125.com-广东体彩官网| www.103528.com-竞彩足球胜平负赛果| www.135389.com-竞彩让球赔率| www.26759.cc-怎样收看七星彩直播| www.243888.com-奇迹快彩网是真的吗| www.07795.com-中彩那天课文大意| www.554407.com-个性体彩彩票宣传语| www.637111.cc-彩虹六号超清壁纸| www.737303.com-智能追号彩票软件| www.54075.com-彩民乐阳光探码| www.hl15.com-福彩3d字画图片| www.v84.com-快三炒群-| www.568460.com-彩票实体店铺二维码| www.654519.com-上饶市福彩中心在哪| www.731846.com-8k彩票安全吗| www.803737.com-福彩字谜总汇大全| www.887803.com-精算足彩-| www.964260.com-彩票数字筛选软件| 全民彩票www.971291.com| www.254132.com-易彩快3怎样算数字| www.05326.com-免费的彩票预测软件| www.714115.com-玩吧快三怎么玩| www.858964.com-福彩75期开奖结果| www.974652.com-七星彩开码结果查询| www.fc95.com-打错彩票怎么赔| www.784659.com-天天红单彩票官网| www.e48.net-nba彩票购买| www.237143.com-体育彩票22选五| www.806492.com-模拟竞彩投资软件| www.881705.com-投彩骗局-| www.65311.cc-青海省中国福利彩票| www.456000.com-3d彩报第二版| www.726880.com-玩彩网苹果版| www.893510.com-河北快三和值大小| 500彩票www.915776.com| www.074.online-新彩彩票合法吗| www.7573.cc-足彩滴滴跟单app| www.so3.cc-分分彩官网-| www.vu76.com-彩票k线图怎么看| www.20nk.com-彩客网官方-| www.px05.com-彩民彩票ios| www.305.in-足彩竞彩年赚一千万| www.521883.com-福体彩开奖公告查询| www.121165.com-微信彩票群揭秘| www.2609.pw-河北十选五爱乐彩| www.232339.com-广西快三选号器| www.871703.com-苏州福彩中心在哪里| www.567507.com-江苏福彩下载| www.966387.com-幸运快三倍投技巧| www.kq5.cc-辽宁快三开奖走势图| www.vb23.com-青岛体育彩票站点| www.07sn.com-体彩p3杀号定胆| www.83qx.com-大乐透彩票兑奖时效| www.1998.vip-福彩微投-| www.753159.com-3d万彩吧-| www.846851.com-古建筑彩绘报价| www.870678.com-王牌彩票合法吗| www.948256.com-福彩与体彩-| 大玩家彩票www.9478n.com| www.hy77.cc-体彩福彩走势图大全| www.32288.cc-彩钢瓦围栏-| www.163257.com-快三跟团队很稳的| www.496451.com-体彩可以手机兑奖吗| www.728552.com-网友高频彩骗局| www.849499.com-体育福彩-| www.930528.com-体彩飞鱼有规律吗| www.996712.com-福利彩票机选和自选| www.no34.com-青海福彩怎么注册| www.57jx.com-网上买彩票怎么注册| www.965542.com-福彩拼搏在线| www.10we.com-体彩4场进球对阵表| www.549788.com-去体彩店怎么买彩票| www.578317.com-兰州体育彩票| www.941573.com-三星彩票娱乐兼职| www.iw47.com-体彩31选7规则| www.078397.com-安徽福彩网开奖结果| www.530430.cc-彩铅纸-| www.687710.com-今天3d彩民乐图库| www.761901.com-大发快三作弊器软件| www.964853.com-57555彩票网| www.17228.com-彩杏娱乐app| www.019534.com-四川体彩开奖结果| www.470338.com-时时彩源码安装教程| www.108657.com-彩票之家应用| www.869889.com-国家足彩认证培训师| www.1490.vip-七色彩虹寓意是什么| www.081837.com-中原彩票骗局| www.162396.com-哪个足彩好中| www.us28.com-中国体彩大乐透| www.620638.com-淘金彩票聊天室| www.688157.com-福彩3d10期计划| www.757187.cc-彩色混凝土路面报价| www.574833.com-足彩十四场比分之5| www.679735.com-如何陪同戒掉彩票| www.778438.com-荷兰三分彩怎么玩| www.840200.com-卡姿兰彩妆代理商| www.248353.com-福彩88是什么东西| www.518630.com-优乐彩网-| www.584580.com-易购彩票是正规的吗| www.654904.com-优点彩票可靠吗| www.716068.com-中国福利彩票假| www.785822.com-彩票代理骗局揭秘| www.854737.com-中国体彩怎么查讯| www.0832.com-去彩票店怎么买足彩| www.320254.com-电视快彩-| www.428982.com-苏州体彩中心在哪| www.548865.com-网上怎么找足彩客户| www.625373.com-一号店彩票客服电话| www.033897.com-快三猜大小单双技巧| www.hz48.com-江苏快三老版本| www.5443.me-梦见猪推荐彩票号码| www.974016.com-体彩中3亿-| www.11tk.com-体彩天下评论| www.800011.com-彩票qq群有没有拖| www.01786.com-凤凰天机六各彩资料| www.123288.com-体彩排列三结果| www.335966.com-体育彩票去哪里买| www.575633.com-福彩块乐十分走势图| www.287635.com-合买彩票软件| www.444235.com-彩票公益素材| www.3432.vip-北京一分钟赛车彩票| www.683739.com-海南体彩下载app| www.798914.com-竞彩足球胜平澳客网| www.891407.com-一分钟快三计划软件|