jQuery仿京东云系列tab图标导航切换代码
选项卡|滑动门 次 2018-11-11jQuery仿京东云系列tab图标导航，实现流畅切换与滑动门效果。简洁的代码设计，轻松实现选项卡功能，提升用户体验。适用于多种网页布局，让导航更加便捷美观，助力网站设计升级。
jQuery仿京东云产品系列图标导航tab切换效果。京东云成熟、领先的解决方案，行业纵深，直达痛点，专业经验为您解决多种业务难题。
[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程
使用方法：
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>
文件目录
本资源来自：代码 » 选项卡|滑动门 » jQuery仿京东云系列tab图标导航切换代码
注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！
jQuery企业商标图片tab布局代码
« 上一篇
2019年03月19日
jQuery电商新闻资讯图文列表tab选项卡切换代码
下一篇 »
2018年08月14日
1、如非特殊说明，本站对本文提供的代码或者素材不拥有任何权利，其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
