手风琴
简单jQuery响应式手风琴特效
PetitQ
这是一款简单实用的 jQuery 响应式手风琴特效。该 jQuery 手风琴效果可以根据父容器的大小来自动调整尺寸。在鼠标滑过手风琴时，它使用 CSS3 来制作动画过渡效果。使用简单，效果非常不错。
使用方法：
下载压缩包，在页面中引入下面的文件。
也想出现在这里？联系我们吧
<script src="lib/jquery.min.js"></script>
<script src="lib/limit.js"></script>
<script src="src/zA7n.js"></script>
HTML 结构：
该手风琴效果的 HTML 结构采用无序列表的结构，基本的 HTML 代码如下：
<div class="accordion" id="demo">
<ul class="accordion__ul">
<li class="accordion__li">
<img class="accordion__img" src="1.png" alt="Image 1">
</li>
<li class="accordion__li">
<img class="accordion__img" src="2.png" alt="Image 2">
</li>
<li class="accordion__li">
<img class="accordion__img" src="3.png" alt="Image 3">
</li>
...</ul>
</div>
CSS 样式：
需要为该手风琴特效提供一些基本的 CSS 样式：
.accordion {
height: 300px;
overflow: hidden;
position: relative;
}.accordion:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
}.accordion._create:after { display: none; }
.accordion__ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
width: 9999px;
height: 300px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
}.accordion__li {
display: block;
list-style: none;
margin: 0;
padding: 0;
height: 300px;
float: left;
overflow: hidden;
box-shadow: 0 0 10px 0 #000;
transition: all 0.3s ease-out;
}.accordion__img {
display: block;
cursor: pointer;
}
初始化插件
在页面 DOM 元素加载完毕之后，可以通过下面的方法来初始化该插件。
$('#demo').zA7n();
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
