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.98551.cc-足球胜负彩分析预测| 博亿彩票www.622by.com| www.570054.com-七彩云南第壹城小区| www.54449.com-迷语特诗4s彩票| www.622571.com-3d彩报三-| www.sm7.com-足球彩票规则| www.932255.com-彩钢围挡价格| www.w90.net-乐彩客彩票官方网站| www.881.net-快三彩票止损方法| www.375320.com-彩金宏辉翻牌机| www.091070.com-博众时时彩软件好吗| www.182228.com-彩票vip平台| www.289779.com-亚博体育平台是黑彩| www.372603.com-下载天天彩票αpp| www.54ud.com-福彩三d开奖比率| www.16519.cc-五分时时彩合法吗| www.688365.com-鸿鼎彩票平台正规吗| www.777865.com-买彩票有什么软件| www.858537.com-彩神计划软件下载| www.930979.com-奇门遁甲预测时时彩| www.999927.cc-彩民村三肖-| www.ev85.com-九州中彩票app| 盛大彩票www.5623c.com| www.774417.com-简单水彩画图片| www.913278.com-彩客网能赚钱吗| www.179676.com-黑龙江快三查询| www.295706.com-冮苏快三开奖走势图| www.379985.com-今天彩票中奖号| www.528032.com-内蒙古破解时时彩| www.67dg.cc-彩漂洗衣液的作用| www.5553.pw-uc彩票网可靠吗| www.198366.com-速赢彩一分快三稳赚| www.625234.com-苏宁彩票正规吗| www.441797.com-买彩票有限额| www.33269.cc-如何开设彩票网站| www.388154.com-星空彩票提现不了| www.51513.cc-天天彩上海昨晚选四| www.120246.com-彩票查询3d预测| www.228825.com-广东好彩1开奖结果| www.376086.com-乐彩08app-| www.511772.com-了四川福彩快乐十二| www.92zo.com-集缘彩票-| www.240218.com-乐彩网7500-| www.975924.com-狂人时时彩杀号| www.ab77.com-快三开奖时间| www.153709.com-8k彩票有多少人玩| www.963864.com-在线买彩票的软件| www.371017.com-彩票站转让合同范本| www.076510.com-体育彩票彩种介绍| www.995493.com-91竞彩之家官网| www.fp93.com-体彩大乐透玩法规则| www.014333.com-乐购彩彩票安全吗| www.751040.com-中福彩票软件下载| www.836535.com-牛蛙彩四不像彩图| www.911007.com-体彩五地-| www.972717.com-彩铅画入门-| www.cai3900.com快三开奖结果贵州| www.pb79.com-竞彩专家推荐| www.913694.com-虚拟足球e球彩技巧| www.973635.com-快三能回本吗| 多乐彩票www.854242.com| www.612612.com-高手特彩吧金彩网| www.712787.com-彩票打票员怎么提成| www.791862.com-中国福彩43期| www.867371.com-一定牛彩票安全吗| www.923812.com-加州时时彩开奖记录| www.980347.com-体彩竞猜玩法| www.sz09.com-体福彩开奖结果查询| www.38113.com-购彩好平台-| www.026083.com-玩十分彩的是骗局吗| www.106766.com-今天彩票开奖结果是| www.cp0633.com-网络彩票破解器| www.80954.com-秒秒彩即时开奖彩票| www.075455.com-彩32-| www.181461.com-好彩投提现的危害| www.289011.com-彩神安徽快3| www.000873.com-时时彩5码7期倍投| www.860057.com-时时彩系统彩源码| www.882628.com-易彩彩票犯法吗| www.954083.com-彩票大赢家缩水软件| 新盈彩www.xinyc2.com| www.jv82.com-北京快三第一牛| www.j22.org-青海福利彩票官网| www.40nv.com-彩票有密码线吗| www.1779.wang-南方神彩专家专栏| www.8088.name-玩彩票如何回本| www.31665.com-福彩店转让怎么办理| www.112841.com-竟彩网计算器胜平负| www.566002.com-彩虹6号干员说话| www.599.cm-彩票76-| www.975113.com-快三计划套路| www.160552.com-彩票七天乐app| www.559997.com-七星彩有什么规律吗| www.770071.com-七彩云南普洱茶| www.851508.com-一分快三长龙经验| www.392782.com-彩票网站推广哪家好| www.625683.com-开心100彩票官网| www.802722.com-下载福彩感恩app| 亿发彩票www.901175.com| www.507293.com-彩神提现不到账| www.an00.com-福彩端下载安装| www.024560.com-新彩网彩神通试机号| www.r62.club-湖南福彩快三| www.872696.com-c9999购彩大厅| 天天彩票www.106560.com| www.732571.com-女孩订婚换彩礼钱| www.940820.com-台北快三赢钱技巧| www.29vt.com-体彩今天出什么号了| www.1753.win-鸿彩网址多少| www.04206.com-用什么买彩票官方| www.577140.com-人人中彩票暂停销售| www.694483.com-江苏球彩票-| www.796844.com-快三每天几期| www.903278.com-福彩3d跨度表图| 爱彩乐www.153918.com| www.014740.com-七星彩网上购买| www.109506.com-手机彩票挂机| www.199507.com-福彩双色球33期| www.g67.club-新万彩吧资料| www.235815.com-9亿彩票-| www.953106.com-吉林省快三带赢| www.377.com-体彩七星彩牛材网| www.781149.com-网上买彩票能赢吗| www.762632.com-i8cp彩票-| www.20405.com-福彩网赚是真的吗| www.82778.cc-绵阳福彩机转让| www.9723.top-全民彩金app| www.125595.com-竞彩足球玩法谁会| www.230146.com-甘肃快三下载| www.315183.com-篮球彩票玩法介绍| www.3631.biz-易彩网里的钱怎么退| www.37618.com-华彩生活app官网| www.006418.com-福彩快三玩法攻略| www.870918.com-四亿彩票官网| www.508299.com-玖富彩票平台靠谱吗| www.654382.com-新盈彩登录-| www.019173.com-福彩开机号近10期| 爱彩www.1999ac.com| www.19336.com-5分时时彩开奖号码| www.77pz.cc-海南网络彩票诈骗| www.311795.com-甘肃福彩结果| www.jx49.com-昨天快三开奖号| www.503973.com-福利彩票购票| www.320339.com-苏快三是什么| www.8623.in-彩票店能买世界杯吗| www.3073.pw-类似于七星彩的古言| www.188746.com-快三中了两个号码| www.257056.com-玩彩票怎么能赢钱| www.331165.com-彩神l大小-| www.023460.com-下载凤凰彩票app| www.111679.com-高德彩票怎么样| www.575566.com-彩票一般几点停售| www.447882.com-七星彩说彩-| www.873953.com-乐和彩官网下载| www.417256.com-盛大彩票怎么才能赢| www.532863.com-澳门五分彩怎么玩| www.49991.cc-福彩生肖6十1中奖| www.304018.com-甘肃福彩中心官网| www.473077.com-七星808彩-| www.k12.net-采摘网牛彩网吧| www.42608.com-大乐透彩票几点停售| www.0472.com-大乐透彩票结果今天| www.6696.live-快三复式表-| www.96148.com-竞彩理论知识|