基于jquery實現(xiàn)手風琴效果

更新時間：2022年04月14日 10:21:43 作者：coder_wb

這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)手風琴效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

用jquery來實現(xiàn)手風琴效果是非常簡單的哦，供大家參考，具體內容如下

首先來看看效果

上代碼

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 () {
? ? ? //鼠標移到當前l(fā)i上，當前l(fā)i的寬度變成434px,li里的h3要添加一個類名active讓背景變紅，文字變白
? ? ? $("#acc")
? ? ? ? .find("li")
? ? ? ? .mouseover(function () {
? ? ? ? ? $(this)
? ? ? ? ? ? .stop()
? ? ? ? ? ? .animate({ width: "434px" }, 800)
? ? ? ? ? ? .children("h3")
? ? ? ? ? ? .addClass("active")
? ? ? ? ? ? //end()是從h3回到li上去
? ? ? ? ? ? .end()
? ? ? ? ? ? .siblings() //當前l(fā)i的所有兄弟li
? ? ? ? ? ? .stop()
? ? ? ? ? ? .animate({ width: "50px" }, 800)
? ? ? ? ? ? .children("h3")
? ? ? ? ? ? .removeClass("active");
? ? ? ? });
? ? });
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: