基于jquery实现手风琴效果

Ianthe ·

更新时间:2024-09-21

· 598 次阅读

用jquery来实现手风琴效果是非常简单的哦，供大家参考，具体内容如下

首先来看看效果

上代码

html

<div id="acc">
      <ul>
        <li class="active">
          <h3 class="active">红玫瑰</h3>
          <div><img src="img/bg1.jpg" /></div>
        </li>
        <li>
          <h3>白玫瑰</h3>
          <div><img src="img/bg2.jpg" /></div>
        </li>
        <li>
          <h3>白玫瑰</h3>
          <div><img src="img/bg3.jpg" /></div>
        </li>
        <li>
          <h3>白玫瑰</h3>
          <div><img src="img/bg4.jpg" /></div>
        </li>
        <li class="last">
          <h3>白玫瑰</h3>
          <div><img src="img/bg5.jpg" /></div>
        </li>
      </ul>
</div>

css代码

<style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      img {
        border: none;
        display: block;
      }
      #acc {
        width: 640px;
        height: 140px;
        margin: 0 auto;
      }
      #acc ul {
        border-left: 1px solid #ddd;
        height: 140px;
        position: relative;
      }
      #acc ul li {
        width: 50px;
        height: 138px;
        border: 1px solid #ddd;
        float: left;
        list-style: none;
        border-left: 0;
        position: relative;
        overflow: hidden;
      }
      #acc ul li.active {
        width: 434px;
      }
      #acc ul li h3 {
        font-size: 14px;
        color: #000;
        font-weight: 100;
        width: 14px;
        height: 98px;
        padding: 40px 18px 0;
      }
      #acc ul li h3.active {
        background: #f42760;
        color: #fff;
      }
      #acc ul li div {
        width: 383px;
        height: 138px;
        background: blue;
        position: absolute;
        top: 0;
        left: 50px;
        border-left: 1px solid #ddd;
        z-index: 0;
      }
      #acc ul li img {
        width: 383px;
        height: 138px;
      }
      #acc ul li.last {
        position: absolute;
        top: 0;
        right: 0;
      }
</style>

js代码

<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(function () {
      //鼠标移到当前li上，当前li的宽度变成434px,li里的h3要添加一个类名active让背景变红，文字变白
      $("#acc")
        .find("li")
        .mouseover(function () {
          $(this)
            .stop()
            .animate({ width: "434px" }, 800)
            .children("h3")
            .addClass("active")
            //end()是从h3回到li上去
            .end()
            .siblings() //当前li的所有兄弟li
            .stop()
            .animate({ width: "50px" }, 800)
            .children("h3")
            .removeClass("active");
        });
    });
</script>

手风琴 jQuery

1024 个赞