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.832654.com-7意彩下载-| www.1280.tv-中信佳彩-| www.639534.com-怎么发掘竞彩客户| www.828630.com-7072彩票下载| www.966892.com-福建快三直播| www.il80.com-烟台福彩网-| www.gw38.com-体彩预测专家| www.389307.com-杨哥说彩双色球今天| www.579542.com-5050彩-| www.8886.date-外围足彩能挣钱吗| www.308.tv-彩票私庄-| www.8381.biz-时时彩手投网| www.35316.cc-彩神争霸1下载| www.576708.com-福彩3d讨论群微信| www.333166.com-中彩网官方网站下载| www.906081.com-福彩3d平台下载| www.259176.com-快三单码十多期不出| www.994414.com-微彩网投-| www.kb01.com-体彩11选5是赌博| www.k69.xyz-掌上七天彩下载| www.78323.com-八桂彩优享版软件| www.984493.com-财神彩票怎么样| www.254162.com-牛蛙彩票下载| www.4477.hk-网页版11选5彩票| www.137302.com-彩霸王三星做号软件| www.877455.com-福彩迷快三-| www.075699.com-瑞彩网可靠吗| www.974073.com-福彩快三有哪些种类| www.cp3228.com-快三一定牛彩票网| www.mc29.com-玩彩网最新版| www.128781.com-彩票猜大小单双| www.93470.com-上海长宁快三计划| www.018915.com-福彩双色球安卓下载| www.115900.com-足彩比分直播14场| www.97tb.com-休彩排五开奖号| www.690953.com-总统彩票网投平台| www.805758.com-彩票属于什么职业| www.882257.com-下载彩神帝-| www.956376.com-诚信彩票app下载| www.6766.cm-打印机彩色打印设置| www.913383.com-五分彩不能提现| www.oo47.com-3d新彩吧图-| www.1790.in-外围彩票网站合法吗| www.283153.com-体彩七星彩开奖规则| www.541779.com-彩票比分-| www.859574.com-28彩app-| www.395281.com-市福彩中心兑奖金额| www.576313.com-中大彩票官网| www.697011.com-彩票2元网怎样| www.072338.com-高频彩万能码数据| www.298951.com-中彩彩票疯狂赛车| www.231105.com-北京快三奖金| www.028719.com-国际博彩论坛| www.133611.com-微信买彩票骗局| www.984606.com-彩虹8彩票平台| www.399855.com-南国彩票4十1论坛| www.571608.com-福彩三等奖是几个数| www.736132.com-手机买彩票能挣钱吗| www.cai7770.com排三彩经网走势图| www.440371.com-河内五分彩记录下载| www.37327.com-购彩3是什么东西| www.79518.com-福彩3d天天彩报纸| www.927848.com-6位数的彩票有哪些| www.999899.com-彩民村app官网| www.gp89.com-易彩快三整合和值| www.98uz.com-网络彩票有人控制吗| www.68664.com-快三大小最多出几期| www.607695.com-足彩竞彩亚洲杯| www.677331.com-茶叶包装彩色纸箱| www.432668.com-凤凰微彩下载| www.154217.com-精彩资讯-| www.913068.com-彩票中奖网站预测| www.998020.com-快发彩票官方直营| www.bg24.com-网上私彩平台哪个好| www.wv97.com-旺彩双色球怎么付款| www.526355.com-足彩总进球数结果| www.174062.com-新快三在线-| www.80401.cc-彩票下载送10元| www.568045.com-买体彩靠谱吗| 博发网www.789199a.com| www.547488.com-一分快三怎么买| www.627888.com-多赢彩票线路| www.653621.com-章鱼彩票竞猜| www.534568.com-海南私彩包码技巧| www.023866.com-福彩20选5-| www.75087.com-彩票汇总数据| www.77vx.com-境外足彩推荐网站| www.4490.vip-网上福利彩票投注站| www.ev86.com-旺彩双色球-| www.706048.com-微信群发送彩金| www.802168.com-福利彩票销售站号| www.879964.com-安微快三遗漏| www.8169.cn-澳门有哪几家博彩| www.110117.com-体彩第19030| www.956033.com-彩票字谜图谜总汇| www.738540.com-七天彩是骗局吗| 金掌柜www.83993k.com| www.789537.com-竞彩买单关能赚钱吗| www.886226.com-福彩双色球杀号定胆| www.953701.com-足彩奖金计算器| www.998642.com-幸运彩手机版下载| www.bi51.com-有人拉你投彩骗局| www.uq43.com-澳洲三分彩走势图| www.13gx.com-新彩吧藏机三字谜| www.573887.com-彩22软件下载| www.869181.com-七星彩选号器免费| www.964021.com-福彩三地和尾值| www.cai9200.com河北省福利彩票快三| www.uy39.com-快三投注计算| www.26je.com-彩友圈app下载| www.839385.com-竟彩足球比分彩客网| www.922796.com-网上怎么注册彩票店| 全民彩票www.qm71.com| www.366390.com-法郎彩真品图| www.656528.com-98彩票-| www.725381.com-彩漂粉去渍去黄| www.id.com-下载福彩快3彩票| www.yz42.com-彩宝彩票-| www.35oa.com-彩票33手机版| www.402654.com-led全彩显示屏| www.542802.cc-体彩七位数中两位数| www.601702.com-有钱人买彩票| www.689835.com-c9彩票登录-| www.796030.com-九鼎彩票网站注册| www.999996.com-彩票帮投陷阱| www.mi06.com-好彩堂跑狗图| www.582673.com-易盈彩票邀请码| www.32711.com-新郑和庄镇彩礼| www.558129.com-大赢家时时彩| www.971253.com-彩票c16-| www.555471.com-三分时彩走势图| www.477322.com-彩神通代-| www.736.date-博盈彩票的骗术| www.090977.com-百胜彩票手机开奖| www.218762.com-大发快三返点怎么算| www.191387.com-快三走势怎么看| www.8077.org-棋牌彩票娱乐| www.712438.com-时时彩老平台排名| www.940611.com-财神争霸500彩票| www.hu71.com-七星彩808彩票网| www.981814.com-毕节附近彩票| www.hx50.cc-快三出对子规律| www.32ir.com-福利彩票推荐书籍| www.785753.com-七星彩开奖结果| www.nk02.com-提款安全彩票平台| www.378096.com-汇彩国际彩票注册| www.001927.com-众彩网徐柯-| www.380199.com-体育彩票初几开奖| www.us34.com-快三所有号码| www.682036.com-彩票代买合法吗| www.774068.com-7星彩开奖结果| www.567049.com-九千万彩票账户| www.64714.com-中国竞彩篮球销售额| www.510410.com-乐迎彩票下载安装| www.78we.com-体彩篮球竞彩网| www.7197.biz-彩票中奖个税税率表| www.172325.com-安微快三今天走势图| www.237046.com-足彩复式投注速算表| www.539344.com-时时彩追杀账号| www.360.tm-香港皇冠彩票| www.077576.com-湖北快三肖立刚| www.175791.com-博众快三彩票软件| www.855291.com-福彩3d鲛人鲨| www.920865.com-彩神可以赚钱吗|