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.cai8881.com河北快三专家推荐号| www.06bv.com-入门写实手绘彩铅| www.795022.com-十一选五彩票方案| www.935091.com-星空彩票官方| www.dv09.com-乐山快三开奖查询| www.14oj.com-宣城体育彩票| www.980123.com-彩票销售员南京| www.wt45.com-江苏福彩快三统计图| www.043.red-四川福彩如何兑奖| www.va7.cc-七乐彩开奖历史大全| www.337965.com-海南福彩快2官方| www.68hl.com-怎么识别彩票站真假| www.5946.pw-传统彩违法吗| www.18033.cc-福彩3d小助手软件| www.69845.com-彩票中奖人-| www.069025.com-彩神ix是真的吗| www.627116.com-全民彩票走势图大全| www.673732.com-古建彩绘图案大全| www.774057.com-网络博彩犯法吗| www.27725.cc-黑龙江时时时彩结果| www.389628.com-如何加盟福利彩票| www.372729.com-彩票彩八下载安装| www.355644.com-和彩心得与技巧| www.31339.com-竞彩必发指数| www.388547.com-网易彩票辅助器| www.7517.cc-体育彩票站变更| www.159689.com-体彩期3d开奖号码| www.215868.com-七星彩计算公式| www.0350.net-被人邀请手机买彩票| www.165591.com-1068彩票手机| www.285616.com-快三是不是正规彩票| www.025862.com-淘宝彩票为什么停售| www.90805.com-80彩票软件下载| www.737246.com-谁知道众彩彩票网站| www.96182.cc-福彩福利彩票| www.155721.com-微彩在线是骗局吗| www.nj0.com-快三遗漏数据查询| www.443326.com-福彩杀码专家排行| www.111072.com-福利彩票能过户吗| www.193191.com-贵州快三结果查询| www.261889.com-新福彩3d-| www.51871.cc-3d双彩图迷-| www.898127.com-彩票二维码扫描| 818合彩www.www.9889hc.com| www.494721.com-竞彩比分分析推荐| www.480688.com-投彩app-| www.627636.com-多乐彩走势图解| www.706308.com-彩宝邀请码-| www.781433.com-卓易彩票网-| www.311962.com-福彩快3害是什么| www.383000.cc-彩票店从哪挣钱| www.478666.com-福彩pk拾玩法| www.557317.com-彩票排三走势| www.626282.com-盈丰彩票网址| www.695316.com-竞彩开奖结果彩客| www.776068.com-时时彩做庄输惨了| www.844098.com-彩票有法律法规吗| www.912607.com-河南幸运彩开奖号码| www.974247.com-体彩和福彩的区别| www.cai0002.com快三玩法介绍| www.024427.com-于盛彩票-| www.111796.com-大资本彩票怎么样| www.235905.com-竞彩足球让球胜平负| www.224.mobi-彩票店微信代购| www.9950.xyz-万众福彩图诗句| www.195008.com-老快三开奖结果| www.221462.com-体彩开奖作弊| www.553094.com-彩票斩龙是什么意思| www.874532.com-亚博体彩下载| www.966501.com-全球彩票网正规吗| www.ul7.cc-褔彩体彩开奖结果| www.td02.com-安卓手机彩票软件| www.88wd.com-福彩网最新邀请码| www.858745.com-彩588彩票网| www.960172.com-彩票网投免费送彩金| 网易彩票www.332907.com| www.he31.com-彩29彩票-| www.xh92.com-七彩网是骗局吗| www.43yi.com-纳彩彩礼-| www.06ho.com-爱好48色彩铅色卡| www.387268.com-手机彩首奖-| www.628844.com-广州好彩酒家宴会| www.720999.com-袁老师福彩3d| www.809287.com-彩票的中奖几率| www.884887.com-高频彩不能追号| www.947417.com-彩吧第三版图库| www.996940.com-快3遗漏內蒙爱彩| www.cx98.com-三分时时彩有多假| www.115549.com-七星彩基本走走势图| www.561532.com-鸿发彩票怎么样| www.712473.com-江苏快三也是赌博吗| www.092392.com-福建体彩网阿四论坛| www.34573.com-彩迷网在哪里找| www.335797.com-山东体彩在线骗人| www.409807.com-彩库宝典在线开奖| www.315748.com-重庆吋时彩开奖视频| www.779787.com-梦书解梦七星彩码| www.gg52.com-彩铅画教程-| www.567438.com-广东福利彩票快乐彩| www.4610.date-重庆市彩刷流水方法| www.323610.com-香港赛马彩票| www.018369.com-高倍率彩票网| www.862221.com-体育彩票19084| www.940016.com-分分快三中奖号码| www.984749.com-彩运8五分快三| www.cp8552.com-今日甘肃快三走势图| www.092879.com-体彩排列五摇奖现场| www.708093.com-blued彩票赚钱| www.800141.com-今天福彩票开奖查询| www.867252.com-体彩6十1停售时间| www.923850.com-cp彩票平台正规吗| www.973556.com-123彩票开奖公告| 500彩票网www.867455.com| www.2404.vip-好彩网是非法赌博么| www.059802.com-福利彩票奖项规则| www.69796.cc-温州市易彩车品| www.833296.com-双彩论坛手机版3d| www.cp5008.com-上海福彩时时乐走势| www.552444.com-买彩票输光了怎么办| www.590115.com-七星彩定胆杀号| www.xn17.com-快易彩票app下载| www.g80.net-彩票中奖内部秘籍书| www.fy02.com-探探好多彩票托| www.536.cm-腾讯时时彩彩app| www.66ar.cc-时时彩三星复式计划| www.sl53.com-彩票幸运农场开奖| www.2ci.cc-彩票店里还能卖什么| www.461177.com-中五百万彩票图片| www.739237.com-网易彩票杀号专家| www.819554.com-易中彩票网-| www.875777.com-恒彩手机登录| www.928917.com-彩拍ios软件下载| www.973243.com-98彩票官网登录| 500彩票网www.97655m.com| www.ch24.com-彩票yy挂机-| www.604805.com-利澳彩票的网站| www.052972.com-中国足球彩票网| 彩乐乐www.cll168.com| www.165089.com-体育彩票足彩任九| www.103223.com-风彩彩票-| www.577867.com-香港hk百彩网| www.cs3.com-分分时时彩开奖记录| www.ov97.com-虚拟足球e球彩规律| www.g23.club-彩票中奖规则查询| www.371532.com-七彩色是哪七种颜色| www.472785.com-吴江福利彩票中奖| www.549909.com-网上不能买足彩| www.606769.com-霸气的彩票群名| www.661514.com-乘风网彩票合买| www.729643.com-彩票3d大奖得主| www.783001.com-甘肃体彩中心电话| www.839273.com-彩票足球app| www.0gt.com-乐彩网密码怎么破| www.50nf.com-天下彩天下彩票与你| www.439615.com-西安未央区福彩转让| www.428255.com-金手指足彩缩水公式| www.113304.com-成都快三查询| www.221484.com-体彩开奖福彩| www.062372.com-北京快三数据分析| www.252169.com-快三手机版-| www.718338.com-彩典宝库app| www.796957.com-八八彩-| www.858814.com-今晚查彩票中奖结果| www.926967.com-体彩排列三预测号码|