jQuery新零售产品系列滑动选项卡布局代码
选项卡|滑动门 次 2018-08-03jQuery新零售产品系列采用滑动选项卡布局，代码实现灵活且高效。滑动门效果提升用户体验，让用户在浏览产品时更加便捷。简洁的代码结构，易于集成和维护，助力新零售业务蓬勃发展。
jQuery新零售产品列表tab选项卡布局，悬停标签滑动切换选项卡代码。
[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程
使用方法：
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/iconfont/iconfont.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="container">
<h2 class="title">新零售系列产品</h2>
<div class="desc">
<strong class="color">新零售：</strong> 即企业以互联网为依托，通过运用
<span class="color">大数据</span>、<span class="color">人工智能</span>等先进技术手段，对商品的生产、流通与销售过程进行升级改造，进而重塑业态结构与生态圈，并对<span class="color">线上服务</span>、<span class="color">线下体验</span>以及<span class="color">现代物流</span>进行深度融合的零售新模式 。<span class="color">线上线下和物流结合在一起，才会产生新零售。</span>
</div>
<div class="content">
<ul class="product-tab">
<li class="active">
<img src="statics/images/product-icon1.png" /> 翼商城
</li>
<li>
<img src="statics/images/product-icon2.png" /> 云ERP+收银狗
</li>
<li>
<img src="statics/images/product-icon3.png" /> 云物流
</li>
<li class="line"></li>
</ul>
</div>
<div class="product-list">
<div class="product-item">
<div class="product-desc">
<h3>翼商城</h3>
<p>智能电商生态系统，支持自营、招商、批发、区域等多模式运营，还可轻松对接物流、ERP、收银等周边系统，帮您打造智能新零售！</p>
<a href="#" class="btn">了解详情 +</a>
</div>
<div class="icon-list">
<ul>
<li>
<a href="#">
<i class="iconfont"></i>
<p>全国电商</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>连锁店</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>供应商</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>厂商/经销商</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>农村电商</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>生鲜电商</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>母婴电商</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>连锁超市</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>百货商场</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>其他行业</p>
</a>
</li>
</ul>
</div>
</div>
<div class="product-item hide">
<div class="product-desc">
<h3>云ERP+收银狗</h3>
<p>云ERP+收银狗是SAAS型进销存与收银系统，以多商家入驻、加盟连锁为经营模式，涵盖平台方、商家、收银员等多种角色，进销存核心模块环环相扣。可无缝对接商城系统，线上线下结合，实现电商实体一体化管理。<span>*加入商家QQ群大本营，一起交流运营心得吧，QQ群号：279730318</span></p>
<a href="#" class="btn">了解详情 +</a>
</div>
<div class="icon-list">
<ul>
<li>
<a href="#">
<i class="iconfont"></i>
<p>果蔬行业</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>餐饮行业</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>服装行业</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>商超行业</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>母婴行业</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>社区行业</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>五金建材</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>快餐外卖</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>咖啡行业</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>校园行业</p>
</a>
</li>
</ul>
</div>
</div>
<div class="product-item hide">
<div class="product-desc">
<h3>云物流</h3>
<p>云物流系统以众包物流为主，自建物流为辅，实现类似滴滴打车的抢单配送。使用云物流系统既可以管理自己的配送团队，也可以整合发单商家和兼职配送人员。<span>*加入商家QQ群大本营，一起交流运营心得吧，QQ群号：292844176</span></p>
<a href="#" class="btn">了解详情 +</a>
</div>
<div class="icon-list">
<ul>
<li>
<a href="#">
<i class="iconfont"></i>
<p>水果店</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>便利店</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>蛋糕店</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>茶饮店</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>鲜花店</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>服装店</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>饭店</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>酒店</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>旅行社</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>更多行业</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
// 产品tab切换
$('.product-tab li').hover(function() {
$('.product-tab li.line').stop().animate({
'left': $(this).position().left
});
$('.product-list .product-item').stop().eq($(this).index()).show().siblings().hide();
});
})
</script>
文件目录
本资源来自：代码 » 选项卡|滑动门 » jQuery新零售产品系列滑动选项卡布局代码
注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！
jQuery响应式选项卡步骤向导插件
« 上一篇
2018年07月25日
js旅游推荐图片手风琴布局
下一篇 »
2019年07月24日
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、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
