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天

知道了
彩01彩票 www.457879.com-如何科学预测彩票| www.t20.website郑州彩票中奖| www.1512.vip-体彩11选5平台| www.cp83.com-内蒙古快三助手下载| www.77986.com-福彩快三的奥妙| www.95633.com-彩票公益事业| www.332447.com-金利彩票骗局大揭秘| www.777849.com-精准快三计划| www.tf50.com-私自转让体彩后果| www.453089.com-中彩国际手机客户端| www.983651.com-足球竞彩外围app| www.su48.com-彩票店上班工作难吗| www.76iu.com-香港三色彩票有开奖| www.3486.vip-福彩没人买了| www.43204.com-乐彩客app1.0| www.712029.com-今天齐鲁风采七乐彩| www.851888.com-365足彩竞彩| www.984270.com-二分彩玩法-| www.wa21.com-甘肃省体育彩票十一| www.50cd.com-中国足彩在线官网| www.3060.cc-乐都彩票网址是多少| www.00784.cc-彩票申请书-| www.952086.com-全民足彩彩票| www.389422.com-福利彩票设备押金| www.496969.com-福彩中奖怎么看| www.888116.cc-v彩-| www.996572.com-新天天彩娱乐| www.lm90.com-彩96app下载| www.4182.cn-体彩七位数中奖说明| www.21644.com-北京五亿彩官网| www.119148.com-家彩网开奖结果报码| www.14213.com-七星彩机选号码投注| www.990481.com-福彩三地谜语| www.76rs.com-彩票天空与你同行| www.835846.com-好彩一二打一生肖| www.397868.com-源码时时彩-| www.392729.com-中国体彩直播网| www.445476.com-体育彩票怎么看开奖| www.wm83.com-内蒙古快三玩法技巧| www.234354.com-彩票要不要买| www.938552.com-快三推荐湖北| 万利www.32123l.com| www.nk28.com-网上竞彩app| www.2xk.cc-快三总共多少组号码| www.640436.com-福彩北京快3和值图| www.866878.com-稳定的信誉彩票平台| www.646676.com-双色球彩民中奖经验| www.729098.com-多玩彩票是真的么| www.828295.com-时时彩免费软件| www.925574.com-女的玩快三-| www.cp181.cc-湖北快三结果| www.21155.com-足彩比分查询| www.17249.com-彩票306的网址| www.538625.com-时时彩中央新闻| www.621097.com-81彩票全天计划| www.870195.com-双色球彩票下载| www.1qt.com-浙江卢某大复式彩票| www.1920.vip-越南时时彩开奖时间| www.652844.com-下载彩贝壳app| www.824690.com-体彩大乐透机选投注| 幸运彩票网www.33598j.com| www.8498.vip-香港好彩网址| www.819240.com-福彩3d中奖高手| www.218909.com-湖北今日快三| www.489112.com-众乐彩票线路导航| www.586380.com-澳门电子送彩金| www.947261.com-胜负彩19052期| www.cai1300.com银川快三开奖结果| www.309018.com-今晚南洋彩开奖号码| www.012396.com-体彩排三怪字帖| www.018732.com-五分快三计划群| www.375615.com-玩网络彩票输钱了| www.1843.net-9老彩民高手论坛| www.085706.com-博彩刷流水挣钱吗| www.227989.com-江苏快三套路| www.346199.com-腾讯世界杯竞猜彩票| www.032558.com-106官方彩票网| www.136138.com-网上买彩票哪个好| www.788237.com-足彩网下载-| www.914941.com-淘宝网买彩票可靠吗| www.d63.club-快三和值走势图山西| www.229256.com-彩票梦想站网址| www.48974.com-彩鸿彩票是真的吗| www.123184.com-下载app欢乐彩| www.330071.com-彩吧网更懂彩民| www.493503.com-985彩票代理商| www.607767.com-日本彩票种类| www.pj47.cc-彩票平刷稳定方案| www.32bi.com-江西11选5啊彩网| www.3368.hk-天天彩票和人人彩票| www.44667.com-乐八彩票官网| www.055042.com-下载黑彩快三| www.331513.com-七乐彩票平台| www.789461.com-中国竞彩网手机下载| www.578158.com-甘肃福彩投注站编号| www.730953.com-大掌柜彩票骗人| www.869912.com-中国网易彩票官网| www.11pg.com-彩票游戏怎么赚钱| www.mk79.com-时时彩稳赢的小秘方| www.066554.com-900彩票安全吗| www.753236.com-633彩票-| www.qm90.com-时时彩买大小规律| www.436.cc-大乐透彩民乐图片| 多乐彩票www.244949.com| www.927418.com-体彩直播开奖| JJ彩票www.11025.cc| 500彩票www.26299i.com| www.16698.cc-体彩足球竞猜技巧| www.2943.vip-体彩门牌-| www.112889.cc-台湾天天快三| www.106677.cc-竞彩串关技巧| www.333603.com-年会彩票中大奖| www.91ei.com-辛运彩票直播| www.930382.com-彩票最新开奖消息| www.011181.com-河南体彩481任2| www.207822.com-彩500-| www.549528.com-彩宝宝官方旗舰店| www.308547.com-辽宁竞彩快三查询| www.14qw.com-立彩网站是什么| www.582837.com-买彩票欠款十几万| www.517660.com-在国内做博彩代理| www.506540.com-向洪甲预测彩票准吗| www.683570.com-台州公开征召福彩| www.861205.com-彩吧3d图谜第一| www.060298.com-青蛙彩票开奖现直播| www.md7.cc-快三的专家推荐号| www.123696.com-排列3乐彩网| www.305345.com-彩票35期预测| www.25617.cc-中国体彩有app| www.93493.com-极速60秒彩票| www.105906.com-cb8彩宝官方网站| www.237884.com-网上大发快三合法吗| www.25899.cc-聚财彩票官网下载| www.68119.com-想开体彩店如何申请| www.029088.com-神州竞彩专业版| www.bv.com-快三专家app| www.883410.com-幸运快三开奖网站| www.34du.com-彩票2元网20选5| www.886973.com-彩票骗局相亲| www.cp5228.com-青海快三开奖查询| www.117358.com-绵阳体彩中心在哪| www.632357.cc-七彩网络阅卷| www.555180.com-彩票押冠亚和技巧| www.2237.cc-网易彩票停售期| www.52328.com-百盈快三平台入口| www.44942.com-最稳定的彩票计划| www.022001.com-山东福彩20选五| www.880865.com-澳博快开彩票| www.de33.com-appcp快三-| www.77it.com-万彩国际app下载| www.99637.cc-重庆时时彩破解漏洞| www.783889.com-幸运彩乐园邀请码| www.09ue.com-体彩大乐透几点封盘| www.046.online-水立方彩票平台| www.jj60.com-彩客网彩票客户端| www.220566.com-旺彩双色球-| www.414828.com-竞彩倍投计算器| www.604991.com-七乐彩与七星彩| www.92048.com-顺丰彩票合法吗| www.958938.com-全球彩票几个版本| www.977346.com-河南彩礼20万| www.1928.site-福彩3d所有组选| www.21972.cc-约彩365官方下载| www.007348.com-体彩出奖号今天|