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.890995.com| www.wm81.com-999彩票网-| www.948060.com-体彩福彩开奘查询| www.cp8022.com-彩票10分钟开一次| www.53ly.com-重庆福彩网官方网站| www.678832.com-棋牌电玩城送彩金| www.785971.com-xr有原彩吗-| www.871727.com-贵阳中彩票-| www.947595.com-688345购彩网| GO彩www.gocp2.com| www.542525.com-大乐透彩票结果今天| www.299977.com-彩票趋势吧-| www.165062.com-河南福彩快3预测| 福利彩票www.8039y.com| www.252711.com-微彩网是合法的吗| www.320778.com-百宝彩票安全吗| www.890915.com-qq7彩票下载安装| www.382058.com-买彩票中奖还帐| www.3732.cc-彩票之家官方邀请码| www.221879.com-彩票上瘾的症状| www.391672.com-印尼时时彩官网开奖| www.543288.com-尊彩app官网| www.627208.com-038彩票查询| www.700589.com-彩票店可以买什么车| www.784168.com-福利采彩票开奖| www.860941.com-好彩1开奖记录| www.933323.com-一分快三出龙多长| 世彩堂www.5854o.cc| www.961324.com-彩专家在线| www.el26.com-一分快3彩票下载| www.918002.com-手机私彩诈骗案| www.989451.com-乐彩网是不是真的| www.dg62.com-彩票多少钱-| www.820315.com-道家彩票中奖符| www.944321.com-体育彩票竞彩是什么| www.yh27.com-67彩网-| 金掌柜www.83993d.com| www.602287.com-彩客即时比分网| www.34559.com-搏彩平台有那些| www.288216.com-福利彩票快开彩| www.422459.com-在线彩票投注app| www.587221.com-篮彩有什么app| www.713202.com-彩票大奖新闻的背后| www.847009.com-澳门足彩必发交易量| www.92111.com-顺丰彩票是真的吗| www.092686.com-福彩片区管理员| www.165507.com-福彩单位怎么考编制| www.250503.com-中彩彩票地址在哪里| www.327158.com-澳洲5分彩-| www.392294.com-搜狐彩票平台| www.267175.com-彩皇网-| www.382316.com-彩票挂机设置| www.330081.com-彩票代打兼职去哪找| www.26808.com-怎么选七星彩| 乐彩赢www.0014j.com| www.728408.com-体彩销售时间| www.m78.top-黑彩平台怎么制作| www.84eb.com-乐彩客苹果下载| www.2559.win-皖快三开奖结果直播| www.62500.com-华夏彩票计划真假| www.862755.com-福彩天天彩选4| www.949526.com-游戏彩票多少是一分| 亿彩www.6832s.com| www.561762.com-彩神平刷怎么样| www.115299.com-体彩绿翡翠9中奖率| www.358741.com-体育彩票6加1规则| www.295601.com-福彩开奖公告查询| www.651296.com-中国水彩画大师排名| www.kj.cc-彩票怎么兑奖| www.88469.com-87体育彩票-| www.693621.com-足彩竞彩胜平负开奖| www.yc7.com-皇都彩票网址入口| www.332108.com-关于体彩竞彩输钱| www.602608.com-彩民之家下载安装| www.744797.com-互联网彩票o2o| www.429838.com-利彩正规吗-| www.838174.com-七星彩奖号-| www.5147.com-春节快三开奖嘛| www.83rc.com-幸运彩票网址手机版| www.6716.top-上饶福彩中心电话| www.29109.com-美术彩铅画作品图片| www.441478.com-山东群英会彩乐乐| www.019637.com-超级赛车彩票怎么玩| www.105806.com-牛蛙彩图-| www.200050.cc-中奖查询彩票| www.274338.com-大奖分分彩人工计划| www.339498.com-赢彩网是不是真的| www.030065.com-万彩彩票-| www.127434.com-日彩网怎么赚钱| www.209613.com-福彩3d今天的奖号| www.281159.com-澳客彩网比分直播| www.346400.com-彩票秒速时时彩| www.430723.com-快三一注豹子奖金| www.6472.xyz-福利彩票双三d| www.160791.com-北京彩票体彩| www.883162.com-官方网678彩票| www.274711.com-中国福彩网官方首页| www.023335.com-彩票讲解-| www.806013.com-一发彩票-| www.359679.com-黑客找彩票漏洞赚钱| www.813838.com-开快三群判刑吗| www.951876.com-加拿大快彩-| 盛彩网www.41518d.com| www.bc79.com-幸运快三计划精准版| www.00561.com-南方好彩网双彩网| www.78551.cc-高频彩怎么看走势| www.361354.com-永安彩票是干嘛的| www.797976.com-彩票半全场-| www.899288.com-福彩快三输钱的原因| www.964098.com-网上彩票买是真假| 500彩票网www.616097.com| www.rx36.com-中彩网wap-| www.526169.com-vr彩票杀大赔小| www.623204.com-摇发彩票听过吗| www.95372.com-彩票属性-| www.063761.com-彩票店承包经营合同| www.150493.com-江西快三软件下载| www.215209.com-深圳福利彩票彩种| www.027095.com-345彩票主页| www.626644.com-天天爱彩票暂停销售| www.707520.com-时时彩送彩金27| www.775585.com-uc彩票是不是诈骗| www.840158.com-足彩模型-| www.935295.com-彩6苹果下载| www.987329.com-体彩大赢家软件| www.na3.com-玩快三平台-| www.830098.com-微信快乐彩是真的吗| www.77px.com-五行彩票预测最准的| www.709563.com-网络体彩诈骗| www.292123.com-彩票站打票员好干吗| www.403815.com-七乐彩开奖数字规则| www.522298.com-彩福网天空彩| www.605122.com-怎样可以中彩票大奖| www.026636.com-500彩票包赔任务| www.455726.com-3d福彩图片第二版| www.568776.com-排列三彩报第二版| www.640556.com-环彩国际app| www.712611.com-齐鲁彩票开奖查询| www.802391.com-福彩消宝石机器| www.879387.com-下载pp彩票软件| www.954807.com-彩助手-| 易彩网www.36166c.com| www.hw16.com-北京pk拾彩票平台| www.b23.biz-胜负彩任九开奖| www.1161.date-肇庆福彩网-| www.87ri.com-淘宝在哪里买彩票| www.51244.com-风发彩票客服| www.33up.com-昨天七星彩中奖结果| www.188749.com-新内蒙古快三| www.286046.com-体彩试机号30彩吧| www.123454.com-体育彩票网3d| www.198938.com-彩票中-| www.292917.com-时时彩官方下载| www.178122.com-彩票快三有口诀吗| www.889288.com-彩川ひなの下海| www.966116.com-体彩六码遗漏统计| 大赢家彩票平台www.509980.com| www.416886.com-彩虹6号游戏图标| www.238766.com-送彩金的彩票| www.318326.com-永利彩票官方网站| www.411195.com-唯彩大乐透预测| www.507411.com-辉腾彩票鸿彩快三| www.322079.com-吉林彩票开奖| www.500788.com-彩票员工背叛11年|