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.606328.com-网络禁彩-| www.48ak.com-大乐透开奖彩乐乐| www.957362.com-盈盈彩注册-| www.810688.com-福利彩票今晚开奖号| www.017.loan-苏宁彩票登录| www.5607.com-厦门体彩中心在哪里| www.18775.cc-彩票33软件-| www.522523.com-胜负彩高手-| www.629522.com-彩票097-| www.718484.com-见到彩虹寓意| www.814551.com-足彩19038预测| www.936875.com-体育彩票怎么玩的| 彩71www.551412.com| www.sk42.com-重庆福彩中心电话| www.055141.com-彩色的鸟-| www.410089.com-跑车彩票攻略| www.759521.com-南阳彩信-| www.994899.com-代玩彩票提供帐号的| www.sw90.com-彩票双色球啥意思| www.je44.com-福彩预测专家最准| www.u71.cc-网上快三平台靠谱不| www.76zm.com-重庆彩票站申请电话| www.369124.com-18位同学合买彩票| www.96gk.com-爱乐透小白彩票| www.4469.me-体彩十一选五公式| www.310632.com-云南省福彩-| www.503227.com-鸿彩平台是真是假| www.715885.com-乐和彩票最新版| www.118350.com-体彩43期-| www.252375.com-全民彩票ios版| www.568777.cc-体育彩票广告语| www.730234.com-第一彩cc-| www.863746.com-132彩票是官网吗| www.cp5520.com-北京快三今天预测号| www.89qd.com-u9彩票可靠不| www.036938.com-懂彩帝-| www.969427.com-158计划网时时彩| www.63219.com-2016年彩礼标准| www.fw04.com-怎么加入彩票群| www.977850.com-彩钢瓦角铁围挡| www.178484.com-中国体育彩票竞彩网| www.492246.com-纯彩票平台能出黑吗| www.685605.com-江苏快3彩经网| www.658122.com-电视福彩怎么回事| www.fr04.com-大发云彩票系统网址| www.646933.com-彩票捕捉出没数字| www.818554.com-七星彩头尾投注网站| www.980712.com-彩77绿茶网下载| www.sh38.cc-一分彩规律破解| www.08yv.com-尼彩手机拆解| www.4804.org-中彩网双色球规则| www.962298.com-红神体彩网页| 亿彩网www.982082.com| www.kw89.com-手机彩票计划软件| www.40909.cc-菲律宾一号彩票| www.5862.top-彩票中奖人照片| www.36sw.com-趣9购彩票-| www.968454.com-福彩中心作弊事件| www.39357.com-王牌彩票网注册| www.sh79.com-怎么判断时时彩大小| www.78ca.com-乐彩网三d首页| www.5012.cn-吉林福彩对奖地点| www.920983.com-数字专家破解博彩| www.105146.com-好彩蓝莓爆珠版本| www.168005.com-北京福彩快三推荐| www.236169.com-竞彩14场开奖结果| www.580137.com-福彩图谜彩报| www.667006.com-彩票站每天有人倍投| www.755564.com-彩票3d开奖带连线| www.826727.com-98app彩票网| www.900672.com-爱彩乐正规吗| www.962722.com-9万彩票app苹果| 500彩票www.50054x.com| www.je83.com-网上买私彩违法吗| www.37295.com-新星彩-| 99彩www.996863.com| www.72126.cc-富彩票-| www.08126.com-广东福彩官网电脑版| www.1803.org-福彩骰子开奖| www.25125.cc-世界彩铅排名| www.265989.com-一分快三全天计划网| www.345107.com-亿乐彩注册登录| www.454047.com-网络福彩推广中心| www.300278.com-天天中彩票与腾讯| www.400839.com-703彩票四肖八码| 中国福利彩票www.34788h.com| www.c97.club-百宝彩贵州11选五| www.722220.com-彩铅食物手绘| www.1336.me-体彩和福彩哪个好| www.81zb.com-竞彩双平-| www.4035.com-博彩牌照-| www.031400.com-天天彩票网是否真实| www.583072.com-买彩票幽默搞笑图片| www.055548.com-中国福彩规则及奖金| www.639709.com-传销型彩票-| www.257333.com-微彩吧app下载| www.365597.com-彩神计划王三天计划| www.510356.com-彩票平投最合适吗| www.0431.org-中福快三是不是| www.378561.com-下幸运彩-| www.07686.com-500彩票网-首页| www.038025.com-28彩票软件大全| www.762216.com-好的竞彩足球软件| www.cp8022.com-彩票10分钟开一次| www.622418.com-体彩排列五众彩网| www.717130.com-彩铅画画入门| www.111516.com-盈彩平台是真的吗| www.493507.com-不能网上买彩票了| www.623615.com-彩票平台招代理加盟| www.731894.com-彩色压印混凝土路面| www.828859.com-九彩彩票平台| www.930806.com-体彩公式-| www.983636.com-狗州app足彩| www.bf.cc-安徽快三复式玩法| www.2183.shop-怎样玩彩票才能赚钱| www.01052.com-台北快三开官方网| www.982634.com-自助彩票机招商| www.509836.com-彩票主题百家号| www.645118.com-七星彩高手杀码平台| www.0446.org-亚洲有哪些高频彩票| www.48656.com-万博网易彩票推荐| www.0197.cn-天津时彩app| www.964215.com-苏州网购e球彩| www.502717.com-多彩下载app| www.512645.cc-40044优彩社区| www.675636.com-博彩娱乐-| www.866342.com-乐迎彩票平台官网| www.jd35.com-中国足球体育彩票| www.705013.com-3d个位杀号彩宝贝| www.850498.com-足彩几串几什么意思| www.960167.com-新用户送白菜的彩票| www.fz3.cc-快三技巧数学公式图| www.te82.com-玩快三能中大奖吗| www.716963.com-彩铅技法基础入门| www.936685.com-自助彩票机如何兑奖| www.984647.com-m5彩票平台注册| www.cp272.com-快三贵州走势图| www.639503.com-500彩票终端机| www.334324.com-668彩票网在线| www.421355.com-联通话费怎样买彩票| www.512602.com-三毛彩吧大全| www.568823.com-体彩大彩鲸-| www.618941.com-福彩宝石连线规则| www.681068.com-迷上彩票怎么戒掉| www.746415.com-彩经网双色球预测| www.795522.com-八仙过海牛彩了网| www.848928.com-彩世界家园-| www.888622.com-搜索一彩-| www.0559.net-体彩票查询表| www.973492.com-温州体彩中心在哪里| www.ac31.com-七乐彩开奖信息| www.20895.com-时时彩平投盈利技巧| www.805361.com-体彩有几种-| www.954028.com-足彩推荐分析网易| www.365468.cc-什么报纸上有彩票| www.453056.com-彩票年销售额| www.532507.com-临沂彩票店转让| www.9346.biz-福利彩票录播事件| www.2300.biz-365微彩票-| www.7420.cc-无锡体彩竞彩店分布| www.364035.com-世界杯哪里有彩票| www.044270.com-体彩排列5规则| www.033158.com-678彩票网开奖| www.544460.com-手机版淘彩票|