这是一款简单实用的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();