基于jQuery綠色簡潔風(fēng)格的新零售介紹手風(fēng)琴切換展示代碼。京東到家模式，美團(tuán)外賣模式，同城電商模式，社區(qū)新零售模式4種手風(fēng)琴滑動切換效果。
使用方法：
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="section">
<div class="container">
<div class="mod-title">
<h2>適應(yīng)多種O2O新零售模式</h2>
</div>
<ul class="mode-list">
<li class="mode-item mode-item-1 active">
<div class="mode-wrap">
<div class="mode-view">
<h3>京東到家模式</h3>
<h4>生鮮百貨 極速送達(dá)</h4>
<i></i>
<ul>
<li>招商入駐</li>
<li>商業(yè)服務(wù)</li>
<li>LBS定位</li>
<li>平臺協(xié)作</li>
</ul>
</div>
<div class="mode-detail">
<div class="detail-left">
<i></i>
<h3>京東到家模式</h3>
<h4>以京東到家的商業(yè)模式為藍(lán)本 專注平臺運(yùn)營和推廣，服務(wù)與配送都由商家提供</h4>
</div>
<div class="detail-right">
<ul>
<li>
<h3>招商入駐</h3>
<p>便捷招商、快速招納優(yōu)質(zhì)商家<br>到平臺入駐、豐富平臺形象</p>
</li>
<li>
<h3>商業(yè)服務(wù)</h3>
<p>不同的商家在平臺提供服務(wù)<br>給用戶提供更多選擇</p>
</li>
<li>
<h3>LBS定位</h3>
<p>用戶可通過手機(jī)端LBS定位后<br>顯示周邊的店鋪信息</p>
</li>
<li>
<h3>平臺協(xié)作</h3>
<p>用戶選擇服務(wù)、商家提供服務(wù)<br>在平臺完成協(xié)作需求</p>
</li>
</ul>
<a href="#" class="get">獲取方案</a>
</div>
</div>
</div>
</li>
<li class="mode-item mode-item-2">
<div class="mode-wrap">
<div class="mode-view">
<h3>美團(tuán)外賣模式</h3>
<h4>打造吃喝玩樂一站式商圈</h4>
<i></i>
<ul>
<li>整合商圈</li>
<li>種類齊全</li>
<li>團(tuán)購促銷</li>
<li>預(yù)約到店</li>
</ul>
</div>
<div class="mode-detail">
<div class="detail-left">
<i></i>
<h3>美團(tuán)外賣模式</h3>
<h4>一個吃喝玩樂全都有的一站式團(tuán)購平臺，基于定位覆蓋同城商圈的娛樂、生活服務(wù)</h4>
</div>
<div class="detail-right">
<ul>
<li>
<h3>整合商圈</h3>
<p>整合同城各類娛樂商圈及服務(wù)<br>在平臺入駐、豐富平臺資源</p>
</li>
<li>
<h3>種類齊全</h3>
<p>讓用戶在平臺擁有更多的選擇<br>促進(jìn)平臺的消費(fèi)發(fā)展</p>
</li>
<li>
<h3>團(tuán)購促銷</h3>
<p>平臺的店鋪優(yōu)惠滿減活動促銷<br>讓用戶更愿意通過平臺下單</p>
</li>
<li>
<h3>預(yù)約到店</h3>
<p>用戶在家即可預(yù)約到店，通過<br>驗證碼推送、即可到店服務(wù)</p>
</li>
</ul>
<a href="#" class="get">獲取方案</a>
</div>
</div>
</div>
</li>
<li class="mode-item mode-item-3">
<div class="mode-wrap">
<div class="mode-view">
<h3>同城電商模式</h3>
<h4>集合本地特色服務(wù)與優(yōu)勢</h4>
<i></i>
<ul>
<li>本地服務(wù)</li>
<li>快速送達(dá)</li>
<li>質(zhì)量保證</li>
<li>廣告收入</li>
</ul>
</div>
<div class="mode-detail">
<div class="detail-left">
<i></i>
<h3>同城電商模式</h3>
<h4>集合本地特色服務(wù)與優(yōu)勢、找準(zhǔn)方向定位、快速覆蓋本地商圈打造同城電商平臺</h4>
</div>
<div class="detail-right">
<ul>
<li>
<h3>本地服務(wù)</h3>
<p>每個城市都有當(dāng)?shù)氐姆?wù)特色<br>能做好天貓京東做不到的優(yōu)勢</p>
</li>
<li>
<h3>快速送達(dá)</h3>
<p>京東天貓配送均為1天左右<br>同城配送可以最快1小時送達(dá)</p>
</li>
<li>
<h3>質(zhì)量保證</h3>
<p>本地商品的質(zhì)量用戶更加清楚<br>因此更愿意信賴平臺品質(zhì)</p>
</li>
<li>
<h3>廣告收入</h3>
<p>同城廣告投放會更加精準(zhǔn)有效<br>平臺可獲取更多的廣告盈利</p>
</li>
</ul>
<a href="#" class="get">獲取方案</a>
</div>
</div>
</div>
</li>
<li class="mode-item mode-item-4">
<div class="mode-wrap">
<div class="mode-view">
<h3>社區(qū)新零售模式</h3>
<h4>社區(qū)服務(wù)+社區(qū)交流+商圈</h4>
<i></i>
<ul>
<li>門店整合</li>
<li>周邊服務(wù)</li>
<li>服務(wù)預(yù)約</li>
<li>評價曬單</li>
</ul>
</div>
<div class="mode-detail">
<div class="detail-left">
<i></i>
<h3>社區(qū)新零售模式</h3>
<h4>整合周邊商家店鋪、供消費(fèi)者在平臺選擇，讓周邊實體商戶都成為你的賺錢渠道</h4>
</div>
<div class="detail-right">
<ul>
<li>
<h3>門店整合</h3>
<p>整合社區(qū)周邊的所有門店入駐<br>到你的平臺、成為賺錢工具</p>
</li>
<li>
<h3>周邊服務(wù)</h3>
<p>消費(fèi)者輕松一覽周邊生活信息<br>在平臺輕松付款下單</p>
</li>
<li>
<h3>服務(wù)預(yù)約</h3>
<p>消費(fèi)者選擇服務(wù)后一鍵預(yù)約<br>技師和配送員即可快速上門</p>
</li>
<li>
<h3>評價曬單</h3>
<p>服務(wù)完成后消費(fèi)者可評價曬單<br>讓其他消費(fèi)者更了解服務(wù)情況</p>
</li>
</ul>
<a href="#" class="get">獲取方案</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(".section .mode-list .mode-item").hover(function() {
$(this).addClass("active").siblings().removeClass("active");
});
</script>
jQuery新零售模式手風(fēng)琴代碼 
