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天

知道了
亚洲28 www.776068.com-时时彩做庄输惨了| www.103378.com-爱波网竞彩比分直播| www.730576.com-老梁揭秘彩票的秘密| www.808327.com-海口彩票网手机版| www.28tr.com-彩票256ios-| www.068153.com-彩票手机app制作| www.ij93.com-福利彩票微信公众号| www.ir4.com-内蒙古时彩开奖结果| www.525631.com-极速时时彩计划网址| www.277774.com-国外高频彩平台| www.476924.com-广西新粤彩报纸| www.583884.com-彩票88官方网站| www.676777.com-彩妆进货渠道| www.759311.com-彩票根号-| www.872734.com-贵阳申请开福利彩票| www.995885.com-竞猜足彩310| www.rg90.com-北京快三今天走势图| www.713870.com-b8彩票app-| www.880353.com-必发彩票网官方网址| www.bw41.com-重庆贵族快三| 九州彩票www.6769r.com| www.395120.com-周五开什么奖彩票| www.956380.com-最新彩票软件| www.cai1616.com江苏快三走势图表| www.335916.com-河北快三数据统计表| www.866258.com-中国体彩下载软件| www.954834.com-瑞彩祥云苹果版网| www.673312.com-中彩网3d手机版| www.085545.com-乐山快三开奖结果| www.460013.com-懂彩帝和懂球帝| www.981261.com-彩票缩水软件大全| www.52tb.com-葡京彩票登录| www.890130.com-nba彩票在哪里买| www.12216.cc-网上怎么投注彩票| www.230473.com-福利彩8真的吗| www.773068.com-彩票预测最简单方法| www.898246.com-今晚七星彩开什么吗| www.799.xyz-大六壬测彩票真经| www.ao07.com-老谢说彩公众号| www.805875.com-体育彩票几天开一次| www.882909.com-678彩票网官网| www.953538.com-马来西亚江山彩票| 818合彩www.www.9889hc.com| www.ev95.com-福彩快三中奖软件| www.328470.com-申请免费彩金| www.216503.com-七星彩解梦册查码| www.962737.com-3d彩吧牛彩图库| www.911505.com-网易福彩开奖| 幸运彩票www.5095q.com| www.84mu.com-网络上的快三可信吗| www.6758.top-买彩票中奖故事| www.589909.com-百彩网免费资| www.861468.com-qq彩票可靠吗| www.12270.com-爱乐透买彩票安全吗| www.8868.org-竞彩交税-| www.57319.com-球彩下载-| www.47um.com-淘彩大发有规律么| www.s08.top-买彩票app那个好| www.75122.cc-彩票管理条例修改| www.050024.com-福利彩票游戏机加盟| www.132255.com-濮阳彩礼限高| www.222089.com-十分钟开一次的彩票| www.042226.com-竞彩篮球计算器| www.3572.cn-送彩金游戏论坛| www.112112.com-如何刷彩票返点| www.2381.xyz-湖北快三过滤工具| www.839605.com-福彩中奖查看| www.9175.biz-七星彩万字正版图| www.83526.com-如何得到彩票大数据| www.3974.top-徐州彩票奖金排行榜| www.64705.com-足彩竞猜什么叫上盘| www.037270.com-福利彩票3d开奖号| www.62692.com-湖北快三冷号统计| www.022685.com-快三黑平台怎么赚钱| www.110342.com-福彩中心主任被查| www.9199.tv-航天彩虹股票牛叉| www.67555.cc-胜彩asia骗局| www.055389.com-安徽福彩快三主页| www.6018.wang-19043期足彩| www.133534.com-福彩3d实战彩票网| www.169021.com-快三彩票实战技巧| www.2204.cn-时时彩连挂30期| www.571985.com-8888彩票pk拾| www.03596.com-北京七星彩信息| www.129590.com-彩票守号中奖| www.310279.com-今日湖北快三推荐| www.459354.com-竞彩单关历史赛果| www.562621.com-福彩3d图谜区| www.679009.com-福彩3d组选三复式| www.794586.com-竞技体育彩票知识| www.006250.com-为何彩77下载不了| www.115789.com-新婚姻法彩礼新规定| www.222174.com-够力七星彩开奖表| www.535559.com-世彩堂app-| www.cp966.cc-博众快三彩票软件| www.109226.com-567kcc彩票网| www.262398.com-皇都彩票登陆| www.873691.com-彩83软件下载| www.444238.com-体彩排列五遗漏号码| www.55um.com-福利彩票10| www.854665.com-华夏彩票坑人| www.273234.com-彩票哪个-| www.577789.com-福彩开奖06期| www.19322.cc-彩发发苹果版下载| www.810370.com-彩票很难经营| www.913028.com-我去彩票站app| www.982243.com-一期彩票人工计划| www.375703.com-排五走势图彩经网| www.87925.com-吉利三分彩计划软件| www.35361.cc-彩票讨论微信群群号| www.587970.com-彩色复印机租赁上海| www.8680.net-香港福彩门户网址| www.351556.com-竞彩老是输怎么办| www.25yo.com-彩票群一直赚钱| www.3181.wang-星彩网3d开机号| www.7806.vip-财神分分彩毒胆算法| www.086041.com-快3彩票聊天室| www.239980.com-彩神网资料大全| www.513272.com-中国竞彩app下载| www.84575.com-彩色透水混凝路面| www.518166.com-赌时时彩的下场| www.24588.cc-海南七星彩奖表下载| www.017613.com-手机版印象彩票| www.cp844.cc-易彩的app咋下载| www.213224.com-吉林快三分析软件| www.068225.com-彩名堂ios更新| www.961647.com-彩票一般买哪种| www.353521.com-彩独-| www.591693.com-福彩三地优势| www.748140.com-977彩票下载| www.900801.com-爱彩票首页登录| 博亿彩票www.656by.com| www.2905.cn-东北快三多少期| www.4001.vip-晴予七星彩今晚预测| www.11805.com-乐米彩票最近怎么了| www.009504.com-50倍彩票-| www.090895.com-重庆体彩兑奖中心| www.2451.vip-pk彩票官网-| www.23157.cc-五分钟一期的快三| www.9870.biz-特彩吧高手料齐中网| www.82174.com-ig传统彩平台大全| www.8511.cc-黑彩怎么玩可以赢钱| www.11731.com-彩乐乐网杀号| www.71442.com-快三能作弊吗| www.900292.com-e乐彩下载-| 誉信彩票www.u936.com| www.365660.cc-高鸿彩票网-| www.830587.com-和乐彩票极速赛车| www.12al.com-彩色的翅膀的作者是| www.1238.cm-平台彩票可以买吗| www.679160.com-中国福彩扫码兑奖| www.1892.vip-明天的3d彩涂| www.90za.com-福彩3d开奖号码| www.373901.com-发财猫彩票下载| www.56871.cc-唐龙说彩彩图版| www.002362.com-满堂彩秒速赛车| www.694442.com-中国福彩开奖记录| www.4027.cc-博彩公司snai| www.3gu.cc-网上不给买彩票了| www.70224.com-长城彩票登录| www.067124.com-彩票店吃票-| www.137711.com-红旗彩票能挣钱| www.207669.com-福彩快三分析软件| www.272002.com-江苏足球竞彩|