jQuery仿京東云系列tab圖標導(dǎo)航切換代碼

jQuery仿京東云產(chǎn)品系列圖標導(dǎo)航tab切換效果。京東云成熟、領(lǐng)先的解決方案，行業(yè)縱深，直達痛點，專業(yè)經(jīng)驗為您解決多種業(yè)務(wù)難題。

使用方法：

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">成熟、領(lǐng)先的解決方案</h3>
		<p class="yun-main-des">行業(yè)縱深，直達痛點，專業(yè)經(jīng)驗為您解決多種業(yè)務(wù)難題</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">在云計算和大數(shù)據(jù)基礎(chǔ)上，結(jié)合了京東十多年電子商務(wù)技術(shù)及運營經(jīng)驗，推出幫助傳統(tǒng)企業(yè)互聯(lián)網(wǎng)轉(zhuǎn)型和打破人、貨、場邊界的無界零售電商解決方案。</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">整合京東云豐富的云資源，為您提供穩(wěn)定、安全、經(jīng)濟的應(yīng)用托管解決方案。一站式服務(wù)，業(yè)務(wù)輕松上云；彈性擴展，輕松應(yīng)對業(yè)務(wù)快速增長；全方面安全防護，保障業(yè)務(wù)數(shù)據(jù)安全。</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>數(shù)據(jù)云</em> </dt>
								<dd class="yun-solution-des">結(jié)合京東“完善高質(zhì)的數(shù)據(jù)鏈+豐富的業(yè)務(wù)場景+強大的數(shù)據(jù)分析能力”，京東云大數(shù)據(jù)處理引擎充分覆蓋各行業(yè)大數(shù)據(jù)需求。京東云大數(shù)據(jù)專家團隊將根據(jù)用戶具體需求，提供豐富的解決方案。</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">依托京東穩(wěn)定、高效、靈活的云計算和大數(shù)據(jù)能力，為政府和企業(yè)提供物流技術(shù)、產(chǎn)品及運營咨詢服務(wù)，降低用戶自建物流成本，提升物流運營效率，助力政企互聯(lián)網(wǎng)+物流轉(zhuǎn)型升級。</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">依托京東云技術(shù)和大數(shù)據(jù)能力，整合京東在互聯(lián)網(wǎng)市場的優(yōu)質(zhì)資源，提供技術(shù)支持、智能產(chǎn)品對接、智能創(chuàng)業(yè)孵化等服務(wù)，加速政府、企業(yè)及個人在“互聯(lián)網(wǎng)+智能”創(chuàng)新轉(zhuǎn)型。</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>產(chǎn)業(yè)云</em> </dt>
								<dd class="yun-solution-des">立足產(chǎn)業(yè)客戶的行業(yè)需求，依托京東云強大的技術(shù)與云產(chǎn)品；并結(jié)合京東的互聯(lián)網(wǎng)+的實踐經(jīng)驗與集團資源；透過京東云專業(yè)服務(wù)，共筑行業(yè)標桿與業(yè)界領(lǐng)先的產(chǎn)業(yè)解決方案。</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">采用獨立的機房集群，與公有云物理隔離。基于兩地三中心的機房布局，滿足一行三會對于金融業(yè)的監(jiān)管要求。幫助金融客戶從現(xiàn)有傳統(tǒng)IT邁向大數(shù)據(jù)和云計算，實現(xiàn)業(yè)務(wù)創(chuàng)新轉(zhuǎn)型。</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>數(shù)據(jù) API 平臺</em> </dt>
								<dd class="yun-solution-des">京東云萬象大數(shù)據(jù)開放平臺是京東云在已有的云計算平臺基礎(chǔ)上圍繞數(shù)據(jù)提供方、數(shù)據(jù)需求方、數(shù)據(jù)服務(wù)方等多方，構(gòu)建了以數(shù)據(jù)開放、數(shù)據(jù)共享、數(shù)據(jù)分析為核心的綜合性數(shù)據(jù)開放平臺，為全行業(yè)提供權(quán)威數(shù)據(jù)支持，打造全行業(yè)數(shù)據(jù)開放的優(yōu)質(zhì)生態(tài)圈。</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">數(shù)據(jù)云
					</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">產(chǎn)業(yè)云
					</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">數(shù)據(jù) 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>

使用聲明

1. 本站所有素材（未指定商用），僅限學(xué)習交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請勿用于商業(yè)用途，會員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統(tǒng)商業(yè)用途請預(yù)先授權(quán)。

查看演示下載資源

0 15252 120

軟件 Dreamweaver
格式 HTML
作者小希望
版權(quán) ? 原創(chuàng)商用（獨家） i

版權(quán)聲明

此作品是由17素材網(wǎng)簽約用戶上傳，17素材網(wǎng)擁有版權(quán)；未經(jīng)17素材網(wǎng)書面授權(quán)，請勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權(quán)；

17素材網(wǎng)尊重知識產(chǎn)權(quán)，如知識產(chǎn)權(quán)權(quán)利人認為平臺內(nèi)容涉嫌侵權(quán)，可通過郵件：3264130392@qq.com提出書面通知，我們將及時處理。

網(wǎng)站提供的黨政主題相關(guān)內(nèi)容（國旗、國徽、黨徽...），目的在于配合國家政策宣傳，僅限個人學(xué)習分享使用，禁止用于任何廣告和商用目的。