簡潔的企業(yè)成功案例圖文列表展示，通過鼠標(biāo)懸停圖片內(nèi)容介紹二維碼和鏈接切換顯示效果。這是一款基于jQuery的圖文案例布局代碼。
使用方法：
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>精彩案例展示</h2>
</div>
<div class="case-list">
<ul>
<li>
<div class="case-show">
<div class="show-text">
<div class="case-logo"><img src="statics/images/logo_1.png"></div>
<div class="case-intro">億家到家，萬種商品，30分鐘新鮮到家！不僅自營生鮮百貨超市，更有美食外賣、同城跑腿、家政上門等便民服務(wù)。</div>
<div class="case-url">
<a href="http://www.godlz.cn/">www.godlz.cn</a>
</div>
</div>
<div class="show-qrcode">
<ul>
<li>
<div class="img"><img src="statics/images/1_app.png"></div>
<div class="intro">掃碼查看APP</div>
<div class="tips">（定位在麥?zhǔn)薪郑?lt;/div>
</li>
</ul>
</div>
<div class="case-demo">
<p class="fl">查看演示：</p>
<p class="fr"><i class="phone"></i></p>
</div>
</div>
<div class="case-show-img">
<div class="case-type">
<p class="fl">案例類型：</p>
<p class="fr"><i class="ios"></i><i class="android"></i></p>
</div>
<div class=""><img src="statics/images/img_1.jpg"></div>
<div class="case-logo"><img src="statics/images/logo_1.png"></div>
</div>
</li>
<li>
<div class="case-show">
<div class="show-text">
<div class="case-logo"><img src="statics/images/logo_2.png"></div>
<div class="case-intro">巡城馬APP隸屬于韶關(guān)市巡城馬信息科技有限公司，打造APP＋商家入駐＋同城配送＋消費(fèi)者的一體化零售與服務(wù)平臺。</div>
<div class="case-url">
<a href="http://www.godlz.cn/">www.godlz.cn</a>
</div>
</div>
<div class="show-qrcode">
<ul>
<li>
<div class="img"><img src="statics/images/2_app.png"></div>
<div class="intro">掃碼查看APP</div>
<div class="tips">（定位在韶關(guān)）</div>
</li>
</ul>
</div>
<div class="case-demo">
<p class="fl">查看演示：</p>
<p class="fr"><i class="phone "></i></p>
</div>
</div>
<div class="case-show-img">
<div class="case-type">
<p class="fl">案例類型：</p>
<p class="fr"><i class="ios"></i><i class="android"></i><i class="pc"></i></p>
</div>
<div class=""><img src="statics/images/img_2.jpg"></div>
<div class="case-logo"><img src="statics/images/logo_2.png"></div>
</div>
</li>
<li>
<div class="case-show">
<div class="show-text">
<div class="case-logo"><img src="statics/images/logo_3.png"></div>
<div class="case-intro">一品時代是一個專為餐飲提供服務(wù)的O2O平臺，服務(wù)面向全國各地的酒店、餐飲和食堂，廠家直接供貨，物美價廉。</div>
<div class="case-url">
<a href="http://www.godlz.cn/">www.godlz.cn</a>
</div>
</div>
<div class="show-qrcode">
<ul>
<li>
<div class="img"><img src="statics/images/3-h5.png"></div>
<div class="intro">掃碼查看H5</div>
<div class="tips">（定位在北京）</div>
</li>
</ul>
</div>
<div class="case-demo">
<p class="fl">查看演示：</p>
<p class="fr"><i class="wechat"></i></p>
</div>
</div>
<div class="case-show-img">
<div class="case-type">
<p class="fl">案例類型：</p>
<p class="fr"><i class="wechat"></i></p>
</div>
<div class=""><img src="statics/images/img_3.jpg"></div>
<div class="case-logo"><img src="statics/images/logo_3.png"></div>
</div>
</li>
<li>
<div class="case-show">
<div class="show-text">
<div class="case-logo"><img src="statics/images/logo_4.png"></div>
<div class="case-intro">漳州小茗信息技術(shù)有限公司通過小程序提供高效、便捷、專業(yè)的商標(biāo)設(shè)計(jì)＋商標(biāo)注冊＋法律維權(quán)＋商標(biāo)轉(zhuǎn)讓等服務(wù)。</div>
<div class="case-url">
<a href="http://www.godlz.cn/">www.godlz.cn</a>
</div>
</div>
<div class="show-qrcode">
<ul>
<li>
<div class="img"><img src="statics/images/4-xcx.jpg"></div>
<div class="intro">掃碼查看小程序</div>
<div class="tips"> </div>
</li>
</ul>
</div>
<div class="case-demo">
<p class="fl">查看演示：</p>
<p class="fr"><i class="weapp "></i>
</div>
</div>
<div class="case-show-img">
<div class="case-type">
<p class="fl">案例類型：</p>
<p class="fr"><i class="weapp"></i></p>
</div>
<div class=""><img src="statics/images/img_4.jpg"></div>
<div class="case-logo"><img src="statics/images/logo_4.png"></div>
</div>
</li>
<li>
<div class="case-show">
<div class="show-text">
<div class="case-logo"><img src="statics/images/logo_5.png"></div>
<div class="case-intro">公老虎通過pc端、app應(yīng)用、微商城為您360度呈現(xiàn)不一樣的生活服務(wù)平臺，品類齊全，輕松購物。</div>
<div class="case-url">
<a href="http://www.godlz.cn/">www.godlz.cn</a>
</div>
</div>
<div class="show-qrcode">
<ul>
<li>
<div class="img"><img src="statics/images/5_app.png"></div>
<div class="intro">掃碼查看APP</div>
<div class="tips">（定位在安順）</div>
</li>
<li>
<div class="img"><img src="statics/images/5-h5.png"></div>
<div class="intro">掃碼查看H5</div>
<div class="tips">（定位在安順）</div>
</li>
</ul>
</div>
<div class="case-demo">
<p class="fl">查看演示：</p>
<p class="fr"><i class="phone"></i><i class="wechat"></i></p>
</div>
</div>
<div class="case-show-img">
<div class="case-type">
<p class="fl">案例類型：</p>
<p class="fr"><i class="ios"></i><i class="android"></i><i class="wechat"></i></p>
</div>
<div class=""><img src="statics/images/img_5.jpg"></div>
<div class="case-logo"><img src="statics/images/logo_5.png"></div>
</div>
</li>
<li>
<div class="case-show">
<div class="show-text">
<div class="case-logo"><img src="statics/images/logo_6.png"></div>
<div class="case-intro">兩只小蜜蜂是北京私語尚品有限公司旗下的社區(qū)便民生活服務(wù)平臺，為社區(qū)居民提供超市商品的即時送達(dá)服務(wù)。</div>
<div class="case-url">
<a href="http://www.godlz.cn/">www.godlz.cn</a>
</div>
</div>
<div class="show-qrcode">
<ul>
<li>
<div class="img"><img src="statics/images/6_app.png"></div>
<div class="intro">掃碼查看APP</div>
<div class="tips">（定位在山西太原）</div>
</li>
<li>
<div class="img"><img src="statics/images/6-h5.png"></div>
<div class="intro">掃碼查看H5</div>
<div class="tips">（定位在山西太原）</div>
</li>
</ul>
</div>
<div class="case-demo">
<p class="fl">查看演示：</p>
<p class="fr"><i class="phone"></i><i class="wechat"></i></p>
</div>
</div>
<div class="case-show-img">
<div class="case-type">
<p class="fl">案例類型：</p>
<p class="fr"><i class="ios"></i><i class="android"></i><i class="wechat"></i></p>
</div>
<div class=""><img src="statics/images/img_6.jpg"></div>
<div class="case-logo"><img src="statics/images/logo_6.png"></div>
</div>
</li>
<li>
<div class="case-show">
<div class="show-text">
<div class="case-logo"><img src="statics/images/logo_7.png"></div>
<div class="case-intro">淘嘀嗒小程序和微商城隸屬于廣東漢牛信息科技有限公司，連鎖便利店，周邊外賣，門店閃送，20分鐘送達(dá)！</div>
<div class="case-url">
<a href="http://www.godlz.cn/">www.godlz.cn</a>
</div>
</div>
<div class="show-qrcode">
<ul>
<li>
<div class="img"><img src="statics/images/7-h5.png"></div>
<div class="intro">掃碼查看H5</div>
<div class="tips">（定位在廣州天河城百貨）</div>
</li>
</ul>
</div>
<div class="case-demo">
<p class="fl">查看演示：</p>
<p class="fr"><i class="wechat"></i></p>
</div>
</div>
<div class="case-show-img">
<div class="case-type">
<p class="fl">案例類型：</p>
<p class="fr"><i class="wechat"></i></p>
</div>
<div class=""><img src="statics/images/img_7.jpg"></div>
<div class="case-logo"><img src="statics/images/logo_7.png"></div>
</div>
</li>
<li>
<div class="case-show">
<div class="show-text">
<div class="case-logo"><img src="statics/images/logo_8.png"></div>
<div class="case-intro">融惠集團(tuán)旗下融惠跨境通APP，全球品牌官方直采，正品保證，保稅區(qū)/海外直郵閃電發(fā)貨，匯聚全球潮流的寶貝！ </div>
<div class="case-url">
<a href="http://www.godlz.cn/">www.godlz.cn</a>
</div>
</div>
<div class="show-qrcode">
<ul>
<li>
<div class="img"><img src="statics/images/8_app.png"></div>
<div class="intro">掃碼查看APP</div>
<div class="tips"> </div>
</li>
<li>
<div class="img"><img src="statics/images/8-h5.png"></div>
<div class="intro">掃碼查看H5</div>
<div class="tips"> </div>
</li>
</ul>
</div>
<div class="case-demo">
<p class="fl">查看演示：</p>
<p class="fr"><i class="phone"></i><i class="wechat"></i></p>
</div>
</div>
<div class="case-show-img">
<div class="case-type">
<p class="fl">案例類型：</p>
<p class="fr"><i class="ios"></i><i class="android"></i><i class="wechat"></i></p>
</div>
<div class=""><img src="statics/images/img_8.jpg"></div>
<div class="case-logo"><img src="statics/images/logo_8.png"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
//鼠標(biāo)懸浮顯示介紹
$(".case-list li").hover(function() {
$(this).find('.case-show-img').hide();
$(this).find('.case-show').stop().fadeIn();
}, function() {
$(".case-list li .case-show").hide();
$(this).find('.case-show-img').stop().fadeIn();
});
//鼠標(biāo)懸浮微信，手機(jī)，小程序圖標(biāo)展示相應(yīng)二維碼
$(".case-list .case-demo i").hover(function() {
var i = $(this);
var parent = i.parent();
var case_show = parent.parent().parent();
var text = case_show.find('.show-text');
var qrcode = case_show.find('.show-qrcode');
var ul = case_show.find('.show-qrcode ul');
var index = parent.children("i").index(i);
i.addClass('active');
text.hide();
qrcode.show();
ul.children('li').hide()
ul.children('li').eq(index).fadeIn();
}, function() {
$('.case-demo i').removeClass('active');
$('.show-qrcode li').hide();
$('.show-qrcode').hide();
$('.show-text').show();
});
</script>
jQuery精彩案例展示列表布局 
