jQuery精彩案例展示列表布局

簡(jiǎn)潔的企業(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">億家到家，萬(wàn)種商品，30分鐘新鮮到家！不僅自營(yíng)生鮮百貨超市，更有美食外賣、同城跑腿、家政上門等便民服務(wù)。</div>
							<div class="case-url">
								<a href="http://m.visaliainvitational.com/">m.visaliainvitational.com</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ù)平臺(tái)。</div>
							<div class="case-url">
								<a href="http://m.visaliainvitational.com/">m.visaliainvitational.com</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">一品時(shí)代是一個(gè)專為餐飲提供服務(wù)的O2O平臺(tái)，服務(wù)面向全國(guó)各地的酒店、餐飲和食堂，廠家直接供貨，物美價(jià)廉。</div>
							<div class="case-url">
								<a href="http://m.visaliainvitational.com/">m.visaliainvitational.com</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)注冊(cè)＋法律維權(quán)＋商標(biāo)轉(zhuǎn)讓等服務(wù)。</div>
							<div class="case-url">
								<a href="http://m.visaliainvitational.com/">m.visaliainvitational.com</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ù)平臺(tái)，品類齊全，輕松購(gòu)物。</div>
							<div class="case-url">
								<a href="http://m.visaliainvitational.com/">m.visaliainvitational.com</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">兩只小蜜蜂是北京私語(yǔ)尚品有限公司旗下的社區(qū)便民生活服務(wù)平臺(tái)，為社區(qū)居民提供超市商品的即時(shí)送達(dá)服務(wù)。</div>
							<div class="case-url">
								<a href="http://m.visaliainvitational.com/">m.visaliainvitational.com</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://m.visaliainvitational.com/">m.visaliainvitational.com</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://m.visaliainvitational.com/">m.visaliainvitational.com</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>

使用聲明

1. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請(qǐng)勿用于商業(yè)用途，會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途，織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

查看演示下載資源

0 12608 62

軟件 Dreamweaver
格式 HTML
作者 I想要
版權(quán) ? 原創(chuàng)商用（獨(dú)家） i

版權(quán)聲明

此作品是由17素材網(wǎng)簽約用戶上傳，17素材網(wǎng)擁有版權(quán)；未經(jīng)17素材網(wǎng)書面授權(quán)，請(qǐng)勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權(quán)；

17素材網(wǎng)尊重知識(shí)產(chǎn)權(quán)，如知識(shí)產(chǎn)權(quán)權(quán)利人認(rèn)為平臺(tái)內(nèi)容涉嫌侵權(quán)，可通過郵件：3264130392@qq.com提出書面通知，我們將及時(shí)處理。

網(wǎng)站提供的黨政主題相關(guān)內(nèi)容（國(guó)旗、國(guó)徽、黨徽...），目的在于配合國(guó)家政策宣傳，僅限個(gè)人學(xué)習(xí)分享使用，禁止用于任何廣告和商用目的。