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.986178.com-时时彩4星平刷大底| www.0551.tv-彩票趋势-| www.9719.biz-彩客骗局揭秘| www.3814.com-好彩什么意思| www.944813.com-彩票比大小软件| www.131209.com-安阳县结婚彩礼多少| www.41051.com-时时中彩票是真的吗| www.xa43.com-福彩和值走势图| www.797.space-凯赢娱乐买彩票| www.444697.com-七星彩梦码查询| www.613740.com-天乐乐彩票网| www.822197.com-爱博彩票67768| 吉彩www.806726.com| www.rs54.com-只赚不赔的彩票| www.84376.com-彩钢房顶寿命| www.0163.cc-怎么买竞彩稳赚不赔| www.088761.com-福彩通平台是真的吗| www.135797.com-彩票员招聘-| www.444277.com-福彩3d14点和值| www.561064.com-彩票计划师怎么赚钱| www.239837.com-王者彩票能赚钱吗| www.zn08.com-福彩积分扫一扫| www.6592.top-彩财网-| www.37734.com-下载彩虫-| www.353962.com-我爱彩票彩票也爱我| www.475586.com-福利彩票扫码摇大奖| www.583072.com-买彩票幽默搞笑图片| www.0bj.cc-足彩卖料的人违法不| www.99315.com-经彩出行退押金| www.383695.com-9万彩票下载苹果| www.cp6758.com-福彩快三官网注册| www.2031.com-河南体彩中心在哪里| www.443990.com-好乐多彩票网| www.79813.com-辽宁省体彩11选5| www.415688.com-红树林彩票娱乐下载| www.343402.com-九万彩票平台怎么样| www.70155.com-天空彩票與你同行| www.39837.cc-彩运8相关-| www.008283.com-19004期胜负彩| www.090090.cc-eg彩票平台导航| www.040.net-新彩有收藏价值吗| www.8959.in-聚彩堂计划下载| www.282337.com-重庆五分彩开奖号码| www.970499.com-彩票漏洞吧-| www.56384.com-天天中彩票骗子| www.394951.com-中国体彩啥时候开奖| www.984691.com-彩运8官方购彩平台| www.bg72.com-五分彩是全国统一吗| www.yi89.com-万彩吧6合资料| www.8508.wang-常州竞彩店转让| www.092160.com-湖北快三1跨遗漏| www.809187.com-彩票中奖可能性| www.358318.com-彩票机多少钱| www.542118.com-360时时彩走势图| www.922379.com-人人彩票怎么给封了| 大赢家彩票www.599464.com| www.70db.com-买七星彩技巧与规律| www.286561.com-逍遥彩票套利团队| www.369852.com-中国福彩123| www.469665.com-福彩宁夏快三| www.550893.com-彩票合买软件有哪些| www.48651.com-篮彩推荐app| www.98662.cc-竞彩足球分析技巧| www.062903.com-网易彩票手机客户端| www.131197.com-郑州市内彩礼| www.37564.com-反水多的彩票app| www.161761.com-洛杉矶快三开奖结果| www.302813.com-体彩825前后关系| www.003059.com-体彩七星彩开结果奖| www.112672.com-一分时时彩刷反水| www.585.com-投彩网站-| www.25052.com-国产彩铅排行榜| www.329675.com-福彩3d今日藏机图| www.448567.com-说彩传媒3d-| www.307507.com-国外彩票开奖结果| www.476924.com-广西新粤彩报纸| www.720680.cc-七星彩容易得奖| www.851008.com-大发时时彩五星玩法| www.665693.com-重庆五分彩官网| www.819605.com-彩票分析师许可证| www.qg73.com-日本好彩香烟价格| www.097060.com-福彩中心新主任是谁| 天天彩票www.2373o.com| www.rk13.com-北京快三有没有技巧| www.6lh.com-华阳彩票官网合买| www.697190.com-彩票清明放假| www.804447.com-重庆时时彩五星二码| www.927501.com-彩票数字几位数| 大赢家彩票平台www.101698.com| www.92ps.com-认识个女的让玩彩票| www.qw72.com-新时时彩走势图| www.8973.cn-关于国彩-| www.55iz.com-东莞市体育彩票中心| www.170817.com-吉林快三走势图表| www.035858.com-彩票优惠活动广告词| www.8633.org-彩神通代理软件下载| www.285675.com-北京快三遗漏查询| www.111783.com-彩票网开户送28彩| www.mg61.com-爱乐彩十一选五| www.382990.com-无锡彩旸香江价格| www.771.gg-曾道玄机彩图| www.062235.com-万彩网靠谱不| www.229668.com-内蒙古快三号码统计| www.309022.com-易彩网彩票时时彩| www.468372.com-一彩票网址大全| www.548655.com-铁公鸡七星彩解梦| www.515748.com-赢彩赢每日资讯| www.90002.cc-彩吧助手双色球随机| www.440169.com-下载贵州体彩| www.565950.com-联合投彩票-| www.678535.com-唯彩旧版下载安装| www.772026.com-多彩贵州我的家绘画| www.873337.com-湖北体育彩票网| www.985204.com-玩彩越输越多| www.gg92.com-彩虹哥-| www.39325.cc-廊坊鸿运彩票标签| www.510910.com-天津彩民之家彩店宝| www.829203.com-新乐彩票app| www.617000.com-制作中奖彩票图片| www.731438.com-易彩堂――主页| www.926291.com-app瑞祥祥云彩票| www.xu80.com-彩票能折叠吗| www.ys48.com-体育彩票三的试机号| www.60bm.com-app福利彩票| www.2920.vip-兰州福利彩票中心| www.992318.com-下载旺彩双色球| www.bx83.com-彩81平台app| www.295.hk-领航时时彩计划软件| www.fl87.com-手机福彩下载| www.88gq.com-彩票注册即送38| www.5575.net-手机d8彩票-| www.ec02.com-福彩快三3有规律吗| www.mo43.com-复式彩票中奖计算| www.918585.com-955彩票靠谱吗| www.867867.com-南国彩票论坛808| www.979612.com-彩金和黄金哪个好| www.gn29.com-快三和值计算规律| www.479077.com-竞彩往期冷门| www.630644.com-足彩竞猜专家推荐| www.578804.com-体彩不同店兑奖| www.696135.com-新浪爱彩竞彩比分| www.785208.com-大胜彩票是真的吗| www.10386.com-足球胜负彩预测软件| www.km82.com-快三网上怎么投注| www.e64.com-福彩网易开奖直播| www.62tb.com-义乌市福彩中心苏西| www.1180.tv-金彩网原装正版料| www.61579.cc-众彩之家app下载| www.968713.com-七星彩走势图大赢家| www.55345.com-中彩网综合分布图| www.002397.com-苏州体育彩票兑奖| www.1515.love-包头福彩中心在哪| www.129506.com-福彩抽奖结果| www.188103.com-北哀快三-| www.996.la-时时彩黄金分割秘诀| www.04pf.com-水彩风景-| www.163448.com-体彩刮刮乐种类| www.015314.com-聚丰50707彩票| www.349368.com-合肥福彩中心墩塘| www.cp1770.com-彩票快三合法么| www.356436.com-智慧彩软件挂机| www.424491.com-中国福利彩票内部| www.518704.com-惠民彩票兼职| www.576658.com-网络彩票官网|