jQuery精彩案例展示列表布局

jQuery精彩案例展示列表布局

收藏
jQuery精彩案例展示列表布局
简洁的企业成功案例图文列表展示,通过鼠标悬停图片内容介绍二维码和链接切换显示效果。这是一款基于jQuery的图文案例布局代码。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 I想要
  • 上传时间 6年前

使用方法:

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="http://www.17sucai.com/">www.17sucai.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">(定位在麦市街)</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="http://www.17sucai.com/">www.17sucai.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">(定位在韶关)</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="http://www.17sucai.com/">www.17sucai.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">漳州小茗信息技术有限公司通过小程序提供高效、便捷、专业的商标设计+商标注册+法律维权+商标转让等服务。</div>
							<div class="case-url">
								<a href="http://www.17sucai.com/">www.17sucai.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应用、微商城为您360度呈现不一样的生活服务平台,品类齐全,轻松购物。</div>
							<div class="case-url">
								<a href="http://www.17sucai.com/">www.17sucai.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">两只小蜜蜂是北京私语尚品有限公司旗下的社区便民生活服务平台,为社区居民提供超市商品的即时送达服务。</div>
							<div class="case-url">
								<a href="http://www.17sucai.com/">www.17sucai.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分钟送达!</div>
							<div class="case-url">
								<a href="http://www.17sucai.com/">www.17sucai.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">融惠集团旗下融惠跨境通APP,全球品牌官方直采,正品保证,保税区/海外直邮闪电发货,汇聚全球潮流的宝贝! </div>
							<div class="case-url">
								<a href="http://www.17sucai.com/">www.17sucai.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">
	//鼠标悬浮显示介绍
	$(".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>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。