手风琴

简单jQuery响应式手风琴特效

阿里云


这是一款简单实用的 jQuery 响应式手风琴特效。该 jQuery 手风琴效果可以根据父容器的大小来自动调整尺寸。在鼠标滑过手风琴时,它使用 CSS3 来制作动画过渡效果。使用简单,效果非常不错。

使用方法:

下载压缩包,在页面中引入下面的文件。

也想出现在这里?联系我们
创客主机
  1. <script src="lib/jquery.min.js"></script>
  2. <script src="lib/limit.js"></script>
  3. <script src="src/zA7n.js"></script>

HTML 结构:

该手风琴效果的 HTML 结构采用无序列表的结构,基本的 HTML 代码如下:

  1. <div class="accordion" id="demo">
  2.   <ul class="accordion__ul">
  3.     <li class="accordion__li">
  4.       <img class="accordion__img" src="1.png" alt="Image 1">
  5.     </li>
  6.     <li class="accordion__li">
  7.       <img class="accordion__img" src="2.png" alt="Image 2">
  8.     </li>
  9.     <li class="accordion__li">
  10.       <img class="accordion__img" src="3.png" alt="Image 3">
  11.     </li>
  12.     ...
  13.   </ul>
  14. </div>

CSS 样式:

需要为该手风琴特效提供一些基本的 CSS 样式:

  1. .accordion {
  2.   height: 300px;
  3.   overflow: hidden;
  4.   position: relative;
  5. }
  6.  
  7. .accordion:after {
  8.   content: "";
  9.   display: block;
  10.   position: absolute;
  11.   top: 0;
  12.   right: 0;
  13.   bottom: 0;
  14.   left: 0;
  15.   background: #fff;
  16. }
  17.  
  18. .accordion._create:after { display: none; }
  19.  
  20. .accordion__ul {
  21.   display: block;
  22.   list-style: none;
  23.   margin: 0;
  24.   padding: 0;
  25.   width: 9999px;
  26.   height: 300px;
  27.   overflow: hidden;
  28.   position: absolute;
  29.   left: 0;
  30.   top: 0;
  31. }
  32.  
  33. .accordion__li {
  34.   display: block;
  35.   list-style: none;
  36.   margin: 0;
  37.   padding: 0;
  38.   height: 300px;
  39.   float: left;
  40.   overflow: hidden;
  41.   box-shadow: 0 0 10px 0 #000;
  42.   transition: all 0.3s ease-out;
  43. }
  44.  
  45. .accordion__img {
  46.   display: block;
  47.   cursor: pointer;
  48. }

初始化插件
在页面 DOM 元素加载完毕之后,可以通过下面的方法来初始化该插件。

  1. $('#demo').zA7n();

简单 jQuery 响应式手风琴特效

已有 576 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!