QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 其它特效 > jQuery信用服务卡片层叠布局代码

原创商用 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>
下载素材后进行评论,每个素材只能评论一次。
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了