QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 圖片代碼 > jQuery精彩案例展示列表布局

2019意甲球队分布图: VIP商用 jQuery精彩案例展示列表布局

簡潔的企業成功案例圖文列表展示,通過鼠標懸停圖片內容介紹二維碼和鏈接切換顯示效果。這是一款基于jQuery的圖文案例布局代碼。
分享到微信朋友圈
X
[聲明]該素材是本站付費買斷的作品代碼,享受著作權?;?,未經允許請勿轉載,否則追究相應的法律責任。

使用方法:

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分鐘新鮮到家!不僅自營生鮮百貨超市,更有美食外賣、同城跑腿、家政上門等便民服務。</div>
							<div class="case-url">
								<a href="//www.wvbxlq.com.cn/">中国福彩快乐十分开奖分布图 www.wvbxlq.com.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">(定位在麥市街)</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隸屬于韶關市巡城馬信息科技有限公司,打造APP+商家入駐+同城配送+消費者的一體化零售與服務平臺。</div>
							<div class="case-url">
								<a href="//www.wvbxlq.com.cn/">中国福彩快乐十分开奖分布图 www.wvbxlq.com.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">(定位在韶關)</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">一品時代是一個專為餐飲提供服務的O2O平臺,服務面向全國各地的酒店、餐飲和食堂,廠家直接供貨,物美價廉。</div>
							<div class="case-url">
								<a href="//www.wvbxlq.com.cn/">中国福彩快乐十分开奖分布图 www.wvbxlq.com.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">漳州小茗信息技術有限公司通過小程序提供高效、便捷、專業的商標設計+商標注冊+法律維權+商標轉讓等服務。</div>
							<div class="case-url">
								<a href="//www.wvbxlq.com.cn/">中国福彩快乐十分开奖分布图 www.wvbxlq.com.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應用、微商城為您360度呈現不一樣的生活服務平臺,品類齊全,輕松購物。</div>
							<div class="case-url">
								<a href="//www.wvbxlq.com.cn/">中国福彩快乐十分开奖分布图 www.wvbxlq.com.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">兩只小蜜蜂是北京私語尚品有限公司旗下的社區便民生活服務平臺,為社區居民提供超市商品的即時送達服務。</div>
							<div class="case-url">
								<a href="//www.wvbxlq.com.cn/">中国福彩快乐十分开奖分布图 www.wvbxlq.com.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分鐘送達!</div>
							<div class="case-url">
								<a href="//www.wvbxlq.com.cn/">中国福彩快乐十分开奖分布图 www.wvbxlq.com.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">融惠集團旗下融惠跨境通APP,全球品牌官方直采,正品保證,保稅區/海外直郵閃電發貨,匯聚全球潮流的寶貝! </div>
							<div class="case-url">
								<a href="//www.wvbxlq.com.cn/">中国福彩快乐十分开奖分布图 www.wvbxlq.com.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">
	//鼠標懸浮顯示介紹
	$(".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();
	});
	//鼠標懸浮微信,手機,小程序圖標展示相應二維碼
	$(".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>
[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 中国福彩快乐十分开奖分布图

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了