手风琴-经典jQuery响应式手风琴特效 | 蓝文资源库 – 海量优质开发设计资源分享平台

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

在线预览网盘下载

郑重声明：

1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

一	二	三	四	五	六	日
« 12月
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

安装

使用方法

HTML结构

CSS样式

初始化插件

郑重声明：

相关文章

发表评论 取消回复

发表评论取消回复