jQuery信用服务卡片层叠布局代码

jQuery基于css3属性制作商家信用服务列表卡片层叠，通过鼠标悬停卡片放大突出显示。适合产品项目简介内容布局代码。

[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程

使用方法：

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="m-product-panel" style="background-image: url(statics/images/bg.jpg);">
	<h3 class="c-title-large light">
		<p class="c-title-main">为您提供的信用服务</p>
	</h3>
	<div class="c-wrapper">
		<ul class="c-row m-product-panel-list">

			<li class="c-col6 active">
				<div>
					<a href="#">
						<h4 class="c-line-clamp">商品租赁</h4>
						<p class="m-product-panel-list-note">适用于线上线下全渠道的物品租赁模式，提升租赁业务量和运营效率。</p>
						<ul class="m-product-panel-list-detail">

							<li>
								<i class="c-icon"></i><span>促进商家获客</span>
							</li>

							<li>
								<i class="c-icon"></i><span>降低运营风险</span>
							</li>

							<li>
								<i class="c-icon"></i><span>提升企业竞争力</span>
							</li>

						</ul>
						<p class="m-product-panel-list-button"><button>查看详情</button></p>
					</a>
				</div>
			</li>

			<li class="c-col6">
				<div>
					<a href="#">
						<h4 class="c-line-clamp">汽车租赁</h4>
						<p class="m-product-panel-list-note">适用于线上线下全渠道的传统租车、分时租赁模式，降低运营成本并提升租车订单量。</p>
						<ul class="m-product-panel-list-detail">

							<li>
								<i class="c-icon"></i><span>促进商家获客</span>
							</li>

							<li>
								<i class="c-icon"></i><span>降低运营风险</span>
							</li>

							<li>
								<i class="c-icon"></i><span>提升企业竞争力</span>
							</li>

						</ul>
						<p class="m-product-panel-list-button"><button>查看详情</button></p>
					</a>
				</div>
			</li>

			<li class="c-col6">
				<div>
					<a href="#">
						<h4 class="c-line-clamp">酒店</h4>
						<p class="m-product-panel-list-note">适用于酒店入驻押金减免场景，提升客户入驻体验，带来客源增涨。</p>
						<ul class="m-product-panel-list-detail">

							<li>
								<i class="c-icon"></i><span>促进商家获客</span>
							</li>

							<li>
								<i class="c-icon"></i><span>降低运营风险</span>
							</li>

							<li>
								<i class="c-icon"></i><span>提升企业竞争力</span>
							</li>

						</ul>
						<p class="m-product-panel-list-button"><button>查看详情</button></p>
					</a>
				</div>
			</li>

			<li class="c-col6">
				<div>
					<a href="#">
						<h4 class="c-line-clamp">短租租房</h4>
						<p class="m-product-panel-list-note">适用于租房平台短租业务，客户体验提升带来业务量的增长。</p>
						<ul class="m-product-panel-list-detail">

							<li>
								<i class="c-icon"></i><span>促进商家获客</span>
							</li>

							<li>
								<i class="c-icon"></i><span>降低运营风险</span>
							</li>

							<li>
								<i class="c-icon"></i><span>提升企业竞争力</span>
							</li>

						</ul>
						<p class="m-product-panel-list-button"><button>查看详情</button></p>
					</a>
				</div>
			</li>

		</ul>

		<p class="m-product-panel-more">
			<a href="#">查看所有信用服务</a>
		</p>

	</div>
</div>

<script type="text/javascript">
	$(function() {
		$('.m-product-panel-list li').hover(function() {
			$(this).addClass('active').siblings().removeClass('active');
		})
	})
</script>

文件目录

本资源来自：代码 » 其他特效 » jQuery信用服务卡片层叠布局代码

注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！