微信扫码登录 ×
vip素材 jQuery信用服务卡片层叠布局代码
vip素材

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>

使用声明

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

  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 美人儿
  • 上传时间 6年前
x
×
×

注册

QQ注册 立即下载 微信注册 立即下载

签到成功!

已连续签到1天,连续签到3天可获得50积分

知道了