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.58tz.com-百宝彩玩法-| www.923990.com-6亿彩票-| www.363358.com-山西体彩网官方首页| www.505145.com-博有彩下载-| www.587018.com-立彩彩票几年了| 大赢家彩票网www.54400m.com| www.919908.com-go彩彩种-| www.039109.com-贵州彩票中奖快三| www.180896.com-豪彩app下载| www.499422.com-刷优胜赚彩金| www.263931.com-湖北快三实开奖号| www.357312.com-公司过年发彩票中奖| www.456928.com-158彩票网计划| www.567182.com-旺旺彩票网-| www.656888.cc-九彩彩票软件下载| www.bi79.com-彩票站app-| www.s03.cc-红中彩票手机版登录| www.66zi.com-乐彩国际是骗人的| www.3928.vip-福彩3d高级会员图| www.16ah.com-彩票今日-| www.311165.com-神圣彩票的网址| www.427703.com-盛大彩票官网首页| www.0021.pw-彩票注怎么算| www.jt21.com-四季彩怎么提现不了| www.37628.com-彩虫下载安装| www.008731.com-彩客网旧版-| www.103331.com-旺彩网手机版| www.218191.com-广西时时彩开奖网站| www.473616.com-南京福彩站点查询| www.np85.com-异地买彩票中奖| www.81jd.com-下载江苏快三走势图| www.875356.com-网易彩票手机| www.971951.com-彩拾彩票受骗| www.dd76.com-人人彩票的騙局| www.83576.com-彩票分析师证书| www.206096.com-韩国福彩快三| www.d02.cc-五洲彩票登录网址| www.141226.com-3d彩吧助手开机号| www.78cs.com-乐彩网玄机图3d| www.881537.com-外国足球职业博彩人| www.703993.com-世界彩票狂人| www.30xc.com-福利彩票的开奖时间| www.579510.com-体彩排列三今天| www.350704.com-彩色激光打印机好吗| www.444288.com-极速快三玩法窍门| www.542940.cc-福彩3d公益站| www.619365.cc-云南省彩票兑奖中心| www.685398.com-福利彩票3d计划| www.772744.com-最佳阵容彩票中奖图| www.846365.com-体育彩票投注点| www.912328.com-聚华体彩店安全么| www.974982.com-大乐透大彩网走势图| www.au4.com-武汉快三-| www.fa47.com-海南七星彩专家预测| www.581406.com-公众号签到送彩票| www.94721.com-福彩体彩销售额| www.787117.com-体彩快乐扑克三| www.091609.com-春秋彩票官-| www.248811.com-什么是28彩票| www.382952.com-3月16日体彩| www.13zh.com-⑥和彩网址-| www.782115.com-数字彩大数据统计| www.114469.com-彩票1360亿案| www.270532.com-中国福彩七乐彩| www.351744.com-福彩销售提成| www.563187.com-老彩民高手榜| www.658080.com-重庆百变王牌百宝彩| www.789730.com-710竞彩平台| www.877060.com-500彩票破解版| www.959401.com-河北快三出号统计图| 博友彩www.952583.com| www.yt48.com-亿网彩票靠谱吗| www.83ms.com-体育彩票游戏规则| www.023225.com-怎样买彩票大小| www.111023.com-518彩票下载安装| www.05gt.com-彩铅渐变画-| www.79fl.cc-彩票性原作者| www.25456.com-教你彩铅画风景| www.29he.com-网上体彩投注有吗| www.uw56.com-快三砍龙技巧| www.779944.com-福彩3d视频教程| www.870846.com-福彩3d幸运码软件| www.947256.com-北京福建快三助手| 易彩集团www.25688m.com| www.172216.com-江西福彩快3玩法| www.zs46.com-福彩彩票注销流程| www.373693.com-外烟好彩-| www.9717.top-彩票行业整顿| www.750337.com-北京单场彩开奖| www.882549.com-希腊5分彩-| www.952414.cc-大奖彩票平台| 500彩票www.26299h.com| www.300024.com-掌上购彩app| www.351827.com-时时彩真的会上瘾吗| www.65633.com-彩票生肖选号器| www.589605.com-体彩排三杀跨| www.691244.com-5o0万足彩-| www.766438.com-彩客旧版2.3.8| www.833981.com-3d彩票图迷专辑| www.892937.com-彩票中奖内部人买| www.951904.com-彩票倍投计算软件| www.994258.com-足彩欧亚指数| www.jh9.com-彩500uu快三| www.928169.com-彩色复印机排行| www.273322.com-千亿彩票网址| www.367386.com-星期三开什么彩票奖| www.274391.com-二分彩票-| www.365843.cc-画细腻的画彩铅| www.320547.com-利盈彩票app| www.402618.com-七星彩幸运之门| www.901044.com-福彩排三开奖号| www.968859.com-福彩3d胆码图| 超级彩票www.901833.com| 小米彩票www.18005.com| www.27637.cc-9188彩票专业版| www.081393.com-足彩跟单微信| www.432050.com-彩票行家免费资料| www.03pe.com-玩广西快三怎么能赢| www.992515.com-158彩票官方版| www.lv58.com-广东好彩3开奖结果| www.36yv.com-七星彩是真是假| www.2875.cm-昨天福利彩票中奖号| www.3838.loan-广州体彩网-| www.947894.com-中国购彩网正规吗| 天下彩www.934689.com| www.32pq.com-长沙市体彩中心电话| www.264918.com-吉林快三推荐号码| www.408935.com-福彩双色球彩票中心| www.616891.com-足球胜负彩推荐填单| www.986561.com-彩票256安卓下载| www.rh44.com-天津彩票时时彩| www.073578.com-一分分彩-| www.181926.com-河北福彩快3走势图| www.333719.com-玩彩网官网-| www.262313.com-福彩就业时报彩图版| www.7909.vip-2n彩票app-| www.798822.com-时时彩杀码秘诀| www.755333.com-久久炫彩彩票| www.837388.com-jc聚彩彩票平台| www.963511.com-网上可以买足球彩票| www.tn47.com-中国的彩票坑人吗| www.9488.net-彩票实名制通知| www.108222.com-双色球谜语彩票报| www.206396.com-好运快三走势| www.ib20.com-河北快三最大遗漏值| www.40928.com-手机上怎么彩票下注| www.96xd.com-彩票为什么限号| www.43205.com-彩500合法吗| www.101553.com-新彩华章-| www.191443.com-安徽快三输钱| www.358962.com-新浪微博怎么买彩票| www.850771.com-京东彩票下载安装| www.984245.com-福利彩票机选号好吗| www.wp46.com-彩票走势绘制图| www.84yo.com-大发500万彩票网| www.060933.com-快三早知道-| www.447115.com-叶子主持福彩| www.883501.com-金百博网络彩票| 幸运彩票网www.33598x.com| www.f12.org-乐彩网怎么不能提现| www.686073.com-手机上买福利彩票| www.805827.com-福利彩票谁监管| www.099860.com-福利彩票小助手下载| www.725821.com-期期中彩票资讯|