这是一款简单实用的 jQuery 响应式手风琴特效。该 jQuery 手风琴效果可以根据父容器的大小来自动调整尺寸。在鼠标滑过手风琴时,它使用 CSS3 来制作动画过渡效果。使用简单,效果非常不错。
下载压缩包,在页面中引入下面的文件。
<script src="lib/jquery.min.js"></script>
<script src="lib/limit.js"></script>
<script src="src/zA7n.js"></script>
该手风琴效果的 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 样式:
.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主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!