Jquery------手风琴案例

 1、布局

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

    </div>

 

2、

$(function () {
            // 鼠标经过,当前小图片淡出,大图片淡入,宽度为224,其他的小图片淡入,大图片淡出,宽度为69
            $(".king li").mouseover(function () {
                $(this).animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn()
                // 其余兄弟
                $(this).siblings().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut()
            })
        })

 

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页