JQ手风琴制作 @Draven

• 效果图
• jquery插件
• html代码
• css代码
• js代码

效果图

jquery插件

https://download.csdn.net/download/Messchao/25731245

html代码

<div class="king">
    <ul>
        <li class="current">
            <a href="#">
                <img src="img/m1.jpg" alt="" class="small">
                <img src="img/m.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/l1.jpg" alt="" class="small">
                <img src="img/l.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/c1.jpg" alt="" class="small">
                <img src="img/c.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/w1.jpg" alt="" class="small">
                <img src="img/w.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/z1.jpg" alt="" class="small">
                <img src="img/z.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/h1.jpg" alt="" class="small">
                <img src="img/h.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/t1.jpg" alt="" class="small">
                <img src="img/t.png" alt="" class="big">
            </a>
        </li>
    </ul>
</div>

css代码

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    img {
        display: block;
    }

    ul {
        list-style: none;
    }

    .king {
        width: 852px;
        margin: 100px auto;
        background: url(img/bg.png) no-repeat;
        overflow: hidden;
        padding: 10px;
    }

    .king ul {
        overflow: hidden;
    }

    .king li {
        position: relative;
        float: left;
        width: 69px;
        height: 69px;
        margin-right: 10px;
    }

    .king li.current {
        width: 224px;
    }

    .king li.current .big {
        display: block;
    }

    .king li.current .small {
        display: none;
    }

    .big {
        width: 224px;
        display: none;
    }

    .small {
        position: absolute;
        top: 0;
        left: 0;
        width: 69px;
        height: 69px;
        border-radius: 5px;
    }
    /*插件引入*/
    <script src="jquery.min.js"></script>
</style>

js代码

<script type="text/javascript">
    $(function () {
        $(".king li").mouseover(function () {
            //鼠标经过某个Li 增加动画width，为后面图片的淡入做准备
            $(this).stop().animate({
                //切换为大图标的尺寸
                width: 224
                //当前li 的小图片 淡出 大图片 淡入
            }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn()
            $(this).siblings("li").stop().animate({
                //切换为小图标的尺寸
                width: 69
                //当前li 的小图片 淡入 大图片 淡出
            }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut()
        })
    })
</script>