介绍一款简单实用的手风琴选项切换效果,鼠标滑动可以在各选项之间进行切换,选项切换的过渡效果流畅,整体颜色和布局都很大气。
开始需要引入css样式和javascript插件,body里面直接调用即可生效。
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/function.js"></script>
$(function() {
$("#cardArea").cardArea()
});
选项通过ul和li生成即可,示例如下:
<li class="card-item active">
<div class="card">
<div class="card-title title-even">
<div class="content">
<div class="zq-product-img">
<i class="zq-icon icon40x40 crad-area-icon1"></i>
</div>
<h1>网站与门户</h1>
<p class="short-info">连接内外 覆盖多端</p>
</div>
</div>
<div class="card-content content-first bg-e8e8e8">
<ul class="content-first-list">
<li>全网门户</li>
<li>企业域名</li>
</ul>
</div>
<div class="card-content content-second">
<div class="main-info">
<a href="#" class="no-effect">
<p class="main-head">全网门户</p>
</a>
<p class="main-tip">全网企业客户触达、获取商机、达成业务</p>
<p class="main-desc">使用企业门户进行客户信息管理、销售线索管理,让您随时随地更轻松地获取新的潜在客户,更快捷地完成业务。</p>
<a href="#" >
<button class="main-btn">了解详情</button>
</a>
</div>
<ul class="other-info clearfix">
<li class="other-info-list">
<a href="#" class="no-effect">
<h3 class="other-head">企业域名</h3>
<p class="other-desc">注域名,享安全服务</p>
</a>
<i class="zq-icon icon17x17 c-a-arrow"></i>
</li>
</ul>
</div>
</div>
</li>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791