微信掃碼登錄 ×
vip素材 jQuery仿京東云系列tab圖標(biāo)導(dǎo)航切換代碼
vip素材

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

收藏
jQuery仿京東云系列tab圖標(biāo)導(dǎo)航切換代碼
jQuery仿京東云產(chǎn)品系列圖標(biāo)導(dǎo)航tab切換效果。京東云成熟、領(lǐng)先的解決方案,行業(yè)縱深,直達(dá)痛點(diǎn),專業(yè)經(jīng)驗(yàn)為您解決多種業(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è)縱深,直達(dá)痛點(diǎn),專業(yè)經(jīng)驗(yàn)為您解決多種業(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">在云計(jì)算和大數(shù)據(jù)基礎(chǔ)上,結(jié)合了京東十多年電子商務(wù)技術(shù)及運(yùn)營(yíng)經(jīng)驗(yàn),推出幫助傳統(tǒng)企業(yè)互聯(lián)網(wǎng)轉(zhuǎn)型和打破人、貨、場(chǎng)邊界的無(wú)界零售電商解決方案。</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)濟(jì)的應(yīng)用托管解決方案。一站式服務(wù),業(yè)務(wù)輕松上云;彈性擴(kuò)展,輕松應(yīng)對(duì)業(yè)務(wù)快速增長(zhǎng);全方面安全防護(hù),保障業(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ù)場(chǎng)景+強(qiáng)大的數(shù)據(jù)分析能力”,京東云大數(shù)據(jù)處理引擎充分覆蓋各行業(yè)大數(shù)據(jù)需求。京東云大數(shù)據(jù)專家團(tuán)隊(duì)將根據(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)定、高效、靈活的云計(jì)算和大數(shù)據(jù)能力,為政府和企業(yè)提供物流技術(shù)、產(chǎn)品及運(yùn)營(yíng)咨詢服務(wù),降低用戶自建物流成本,提升物流運(yùn)營(yíng)效率,助力政企互聯(lián)網(wǎng)+物流轉(zhuǎn)型升級(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/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)市場(chǎng)的優(yōu)質(zhì)資源,提供技術(shù)支持、智能產(chǎn)品對(duì)接、智能創(chuàng)業(yè)孵化等服務(wù),加速政府、企業(yè)及個(gè)人在“互聯(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è)需求,依托京東云強(qiáng)大的技術(shù)與云產(chǎn)品;并結(jié)合京東的互聯(lián)網(wǎng)+的實(shí)踐經(jīng)驗(yàn)與集團(tuán)資源;透過(guò)京東云專業(yè)服務(wù),共筑行業(yè)標(biāo)桿與業(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">采用獨(dú)立的機(jī)房集群,與公有云物理隔離?;趦傻厝行牡臋C(jī)房布局,滿足一行三會(huì)對(duì)于金融業(yè)的監(jiān)管要求。幫助金融客戶從現(xiàn)有傳統(tǒng)IT邁向大數(shù)據(jù)和云計(jì)算,實(shí)現(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 平臺(tái)</em> </dt>
								<dd class="yun-solution-des">京東云萬(wàn)象大數(shù)據(jù)開(kāi)放平臺(tái)是京東云在已有的云計(jì)算平臺(tái)基礎(chǔ)上圍繞數(shù)據(jù)提供方、數(shù)據(jù)需求方、數(shù)據(jù)服務(wù)方等多方,構(gòu)建了以數(shù)據(jù)開(kāi)放、數(shù)據(jù)共享、數(shù)據(jù)分析為核心的綜合性數(shù)據(jù)開(kāi)放平臺(tái),為全行業(yè)提供權(quán)威數(shù)據(jù)支持,打造全行業(yè)數(shù)據(jù)開(kāi)放的優(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">展開(kāi)全部</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 平臺(tái)
					</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é)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后,只擁有使用權(quán),著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材,未經(jīng)合法授權(quán),請(qǐng)勿用于商業(yè)用途,會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材,否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途,織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

  • 軟件 Dreamweaver
  • 格式 HTML
  • 作者 小希望
x
×
×

注冊(cè)

QQ注冊(cè) 立即下載 微信注冊(cè) 立即下載

簽到成功!

已連續(xù)簽到1天,連續(xù)簽到3天可獲得50積分

知道了