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.uy42.com-c23彩票登录| www.74ru.com-体彩怎么算中几等奖| www.233539.com-北京彩票站-| www.595984.com-体彩排五走势走势图| www.707639.com-福彩网赚是真的吗| www.801144.com-长春市体彩电话投注| www.301411.com-百宝彩青海快3| www.442482.com-福彩平台刷单| www.636368.com-彩虹糖分类机| www.8750.com-七星彩早版湛江版区| www.34226.com-保定市体彩中心电话| www.045486.com-彩票跟单是什么意思| www.547681.com-体彩七星彩机选一注| www.630738.com-彩乐爆危险吗| www.fj48.com-福彩快三买大小单双| www.567765.com-4月胜负彩何时开售| www.698038.com-彩票篮球中奖规则| www.791952.com-彩宝网排列三| www.889306.com-以前的如意彩票网| www.968451.com-彩票作弊事件视频| www.cai2567.com湖北精彩开奖| www.69562.com-99彩票安全吗| www.1708.xyz-彩工网推荐快三| www.791842.com-梦想彩票站网址| www.g00.com-海南四码彩票玩法| www.cy93.com-中国人人彩票| www.807147.com-足彩二串一稳赚技巧| www.255596.com-时时彩回血平投| www.026327.com-彩票开奖时间一览表| www.143197.com-时家奇门测彩| www.503792.com-有没有玩彩票的网站| www.396572.com-百废彩票开奖查询| www.w57.cc-pp期期好彩-| www.cp332.com-快三老平台-| www.830245.com-哪里可以买彩票网| www.901578.com-体育彩票奖金| www.964515.com-中国体彩网电脑| www.cai567.com-快三手机投注平台| www.lo09.com-彩12app下载| www.aj27.com-一定牛彩票网可靠吗| www.316150.com-余姚体彩去哪申办| www.473439.com-河北体彩网中奖查询| www.1374.cm-漫威水彩抽象画| www.548385.com-购彩网下载链接| www.19tv.com-彩仙阁论坛-| www.1249.cc-五分彩个位计划规律| www.ed20.com-百姓彩票快3| www.363866.com-江苏快三二不同预测| www.477855.com-佛山福彩2019| www.a24.net-福彩标志-| www.563253.com-福中彩票的官网| www.703342.com-福彩3d小助手软件| www.je57.com-上海快三开今天结果| www.700303.com-体彩在哪买-| www.683958.com-福彩实体店app| www.871642.com-今晚福彩三地开奖号| www.js2.com-河南481彩票| www.42nc.com-靠谱的竞彩-| www.588044.com-竞彩篮球比分场| www.208.net-好彩蓝莓双爆香港| www.366390.com-法郎彩真品图| www.4763.vip-足球竞猜比分彩客网| www.60115.com-2019体彩新规| www.062034.com-彩票双色球预测精准| www.164569.com-彩票害人知乎| www.95713.com-福彩中心改企后人员| www.526.space-七乐彩历史中奖号| www.937823.com-体彩19014期| www.480003.com-体彩网吧-| www.677596.com-体彩排列三组选走势| www.886732.com-福彩坑人-| www.cp460.cc-十大私彩平台| www.d53.top-彩票ai软件-| www.986.red-彩票2元网下载官网| www.512963.com-好运时时彩登录网站| www.252511.com-今日中彩软件| www.gv51.com-彩票下级返点8| www.134710.com-体彩7位数中奖| www.297319.com-快三怎么玩才能赚钱| www.385004.com-盈盈彩票官方网址| www.493344.com-彩钢瓦喷漆机器| www.566302.com-和彩放题蓝色港湾店| www.365116.cc-风之彩app彩票| www.149967.com-仲彩是黑平台吗| www.cai52.com-快三开奖结果走势图| www.282451.com-双色球最新彩民乐| www.371994.com-体育彩票有骗局吗| www.537073.com-春秋彩票是黑平台| www.639604.com-申请竞彩的条件| www.552296.com-日本1.5分彩计划| www.626496.com-老彩民高手网| www.691915.com-8亿彩app是什么| www.034133.com-1994年七月彩票| www.111751.com-职业足彩-| www.178027.com-福彩3d走势乐彩网| www.00377.com-南方双彩论坛| www.168711.com-福彩北京快3开奖| www.455535.com-七乐彩准确杀号公式| www.581082.com-中国福彩投诉电话| www.330113.com-彩宝网-| www.636340.com-彩虹糖机器怎么做| www.769870.com-好彩头安卓-| www.369405.com-彩友时时彩计划在线| www.580201.com-最近的彩票数是多少| www.680799.com-台湾彩券中奖查询| www.13ba.com-彩经网软件下载| www.897.red-彩客网i-| www.905083.com-苏州彩票店转让信息| 500彩票www.26299k.com| www.cp7277.com-吉林省快三赌博案例| www.363908.com-乐猫彩票旺旺彩票| www.8227.in-跳快三的歌曲是什么| www.7238.top-彩虹冰淇淋店| www.qd30.com-好彩香烟蓝莓| www.oi80.com-重庆时彩是骗人的吗| www.32377.cc-8k彩票赚钱可靠吗| www.279727.com-山东福彩群英走势图| www.772573.com-最吸引人的彩票群名| www.867275.com-福利彩票双色球| www.935760.com-彩神3300uv-| www.977656.com-世界杯足彩赔率表| www.cp2978.com-彩票群骗局-| www.119150.com-香港福彩三的| www.531644.com-彩票4挂机-| www.167078.com-快三大小规律破解图| www.145883.com-金手指的彩票专栏| www.061125.com-彩客网靠谱么| www.568281.com-前十名的彩票平台| www.755925.com-彩票刷打码量是什么| www.916094.com-时时彩娱乐-| www.984682.com-彩运8怎么赚钱| www.ct81.com-优信彩票1-| www.46lg.com-彩票网赚平台靠谱吗| www.254482.com-好彩网app-| www.160.tv-取名彩虹的含义| www.274040.com-时时彩投资计划| www.693173.com-辽宁福彩短信指令| www.957624.com-七星彩机选号码5注| www.bs14.com-亚投彩票-| www.tq00.com-百姓彩票注册| www.23rr.com-福彩三地最新开机号| www.0104.top-天天彩票开奖结果| www.4904.xyz-彩票票样怎么看| www.172329.com-安微快三遗漏走势图| www.976771.com-全国结婚彩礼排行| www.gz.cc-北京快三基本走势图| www.pw36.com-快三砍龙什么意思| www.319979.com-昨天体彩开奖| www.227448.com-用哪个app买彩票| www.46899.com-秒速时时彩单期计划| www.363564.com-古桥和彩虹阅读理解| www.469468.com-彩票走势图彩票开奖| www.541489.com-彩金是什么金| www.734833.com-新手如何玩彩票| www.814184.com-大掌柜彩票是真的吗| www.987471.com-黑龙江福彩官方网站| www.pk81.com-360彩票老快3| www.0hs.com-苹果体彩软件下载| www.57tz.com-花呗充值彩票| www.191537.com-河北省快三推荐号码| www.497338.com-家彩网试机号对应码| www.847275.com-足彩去哪里买得到| www.600066.cc-买彩票运气很重要吗| www.683856.com-玖玖网彩票-|