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.j18.org-天天中彩票没法升级| www.809187.com-彩票中奖可能性| www.0488.cc-体育彩票网点号查询| www.276865.com-三分时时彩正规吗| www.501155.com-最近福利彩票站西平| www.482235.com-时时彩有人赢吗| www.648922.com-730彩票软件下载| www.by46.com-快三平台计划软件| www.970131.com-国彩app有哪些| www.9113.online广州体育彩票兑奖处| www.739339.com-多盈彩票网址| www.952415.com-33时彩-| www.988.vip-七星彩梦册大全查询| www.51023.com-海南私彩七星彩官网| www.316520.com-新浪爱彩旧版| www.916393.com-重庆实时彩历史开奖| www.11qc.com-越南内河时时彩| www.85012.com-福彩彩圣字谜总汇| www.621210.com-胡北快三开奖走势| www.462809.com-福利彩票双色球九| www.86mb.cc-福彩1011-| www.nw06.com-大发彩票登入| www.4252.biz-诚信的彩票预测软件| www.026167.com-彩票兼职代打| www.356449.com-发发彩票网图库大全| www.567695.com-江苏体彩11造5| www.921392.com-河北快三多长时间| www.fc11.cc-体彩开奖作弊| www.29628.com-山东群英会彩票软件| www.132535.com-彩妆超市加盟| www.82wo.com-体彩排列五怎么兑奖| www.5551.shop-上海快三倍投| www.697605.com-海南七星彩如何包码| www.135144.com-陆和彩开奖记录| www.516619.com-色彩的视觉感受| www.55068.com-金沙集团送45彩金| www.083676.com-网上博彩是违法的吗| www.228122.com-河南洛阳彩礼价目表| www.376062.com-16588立彩-| www.574182.com-e77乐彩登录平台| www.9182.org-彩票四字型万字表| www.72575.cc-c彩票-| www.078084.com-中福彩在线合法吗| www.8876.date-黑彩漏洞-| www.67rz.com-熊猫彩浜-| www.933994.com-彩票排列三-| 大赢家彩票平台www.915056.com| www.b38.club-澳门彩票-| www.92ro.com-福彩29选7一等奖| www.8940.me-七星彩到几点结束| www.10pa.com-彩钢瓦漏水用什么胶| www.733283.com-今天彩票中奖号码| www.828186.com-龍之彩彩票-| www.898975.com-美团彩票机-| www.964999.com-麒麟彩票网骗局揭秘| www.cp625.cc-北京快三投注平台| www.no90.com-彩票选号器最新版| www.669602.com-福利彩票太湖字谜解| www.761249.com-好彩快3官网| www.ps18.com-珠江彩票官网| www.yq32.com-正规福利彩票网站| www.092425.com-江西彩礼贵吗| www.206561.com-567彩票快三| www.94jl.com-彩票盘口出租平台| www.11027.com-许仙足彩-| www.87217.com-七星彩怎么买法| www.17267.cc-cpt彩票通app| www.956.mobi-彩票当头电影| www.206084.com-彩票代打兼职靠谱吗| www.318140.com-全国福彩开奖公告| www.471571.com-香港三色彩333| www.580808.com-新8彩-| www.686064.com-南京福彩快三开奖| www.816329.com-快三平台赌博骗局| www.932307.com-快三破解器软件下载| www.gg79.com-众彩乐手机版下载| www.32rx.com-乐透型彩票分析| www.3026.live-qq彩票qq7-| www.46055.cc-云彩生活彩票| www.96618.com-三四五福彩什么意思| www.089895.com-大发快三破解之法| www.143698.com-青海福彩管理中心| www.218660.com-台北快三投注技巧| www.276566.com-乐购彩票网app| www.337810.com-孕妇梦见彩票中奖| www.397545.com-云南快三技巧| www.530054.com-彩神争覇app| www.602091.com-游戏机厅彩票券| www.668731.com-彩票冷热走势图| www.731508.com-中国竞彩网电脑版| www.791460.com-彩票店没有卖快三| www.861546.com-甘肃福彩领奖地址| www.910515.com-怎么买彩票中奖率高| www.964753.com-海南琼崖快三| 彩票大家乐www.21202b.com| www.as54.com-广西快三跨度走势图| www.oh24.com-皇彩票app-| www.050335.com-买3d黑彩5码| www.107705.com-彩票里面屠龙啥意思| www.155843.com-辉煌彩票注册网址| www.212237.com-大发快三彩票种类| www.273230.com-彩票假-| www.326889.com-175oo乐彩网l| www.385309.com-彩票大平台抢红包| www.497619.com-5k彩票注册登录| www.552273.com-大家赢彩票网合法吗| www.610923.com-彩虹六号围攻吧| www.670135.com-中国合法网络彩票| www.726785.com-天津福运快三查询| www.782392.com-tt彩票网人工计划| www.850661.com-315彩票网-| www.896321.com-七星彩开奖视频结果| www.955005.com-快彩助手11选5| 新盈彩www.xinyc2.com| www.eu63.com-快三算法大小单双| www.rx74.com-玩分分彩app| www.277686.com-众彩网专家推荐汇总| www.336826.com-沈阳福彩中心地图| www.436852.com-福彩3d研究院| www.550768.com-华夏彩票快3| www.656763.com-博彩seo-| www.770829.com-七彩本草方-| www.280996.com-时时彩诈骗报警| www.417944.com-附近福利彩票位置| www.536884.com-注册送18彩金彩票| www.669337.com-海南私彩为什么火| www.794078.com-公务员买彩票犯法吗| 大赢家彩票平台www.211873.com| www.k12.net-采摘网牛彩网吧| www.bo51.com-网购彩票正规平台| www.363910.com-廊坊福利彩票中心| www.529501.com-分分彩娱乐平台| www.677350.com-给推荐彩票号| www.d11.cc-彩票开奖七星彩今天| www.209226.com-一分快三大发下载| www.530409.com-时时彩前三万能四码| www.635603.com-七彩阳光第二段视频| www.739764.com-盛源彩票下载| www.873827.com-上海福采快三开奖号| www.995258.com-体彩大乐透直播开奖| www.he50.com-01彩票破解-| www.88bg.com-凤彩网170-| www.6888.biz-广东好彩一今日开奖| www.96072.com-加强彩票市场监| www.181965.com-爱彩乐武汉快三| www.342416.com-西安天彩粮口碑| www.500236.com-中国福彩一年销售额| www.778181.com-用彩绳编东西| www.5364.org-体育彩票七星彩精英| www.cs44.com-彩神8平台不给提现| www.004797.com-福彩6加1中奖规则| www.049041.com-k8彩票登录平台| www.88499.cc-彩票店代买-| www.483980.com-黑彩网站是动态网站| www.627349.com-红旗游戏彩票平台| www.4600.xyz-中国彩票中奖遇害| www.34791.com-牛彩3d论坛-| www.vy60.com-体彩多乐彩开奖结果| www.215342.com-瑞彩祥云是黑彩吗| www.354399.com-16年彩票大奖| www.018976.com-足彩过滤软件app| www.876524.com-今日彩票老黄历| www.0871.space-福利彩票购彩平台| www.055126.com-彩色包括哪些颜色|