jQuery实现手风琴选项卡

案例时间

为何叫手风琴我也不清楚，直接的视觉效果就是鼠标滑过期大图片显示小图片隐藏。emmmmm，就是这样的。看下效果图。

核心布局：用ul。li中的a放两张图片，小图片使用定位定到li的最左边，大图片不用动直接放在a里就行。

效果：正常显示的话是小图片显示，当鼠标滑过当前li时，当前li里的小图片淡出大图片淡入；其余li中的大图片淡出小图片淡入。

说简单也简单，说不简单也不简单。就是我开始按照个人思路作的话，就用淡入淡出的效果，可是动画的效果总会有些卡顿，改进的作法是用jQuery封装好的animate动画，这样就流畅了不少。

案例中主要的技术知识点仍是jQuery中方法的使用。

来来来，给你看代码拉。

初版代码：

// 方法1：使用添加类的方法
    $(".content-nav li").mouseenter(function () {
        // 当前li宽度变为224px 添加类；li里面小图片淡出 大图片淡入
        $(this).addClass("current");
        // $(this).find(".small").stop().fadeOut();
        // $(this).find(".big").stop().fadeIn();
        // 链式编程
        $(this).find(".big").stop().fadeIn().siblings(".small").stop().fadeOut();
        // 当前li的其余兄弟元素 li宽度为69px原始宽度，小图片淡出大图片淡入
        $(this).siblings("li").removeClass("current");
        // $(this).siblings("li").find(".big").stop().fadeOut();
        // $(this).siblings("li").find(".small").stop().fadeIn();
        $(this).siblings("li").find(".big").stop().fadeOut().siblings(".small").stop().fadeIn();
    });

第二版代码：

$(".content-nav li").mouseenter(function () {
        // 当前li图片变化
        $(this).stop().animate({
            width: 224
        }).find(".big").stop().fadeIn(400).siblings(".small").stop().fadeOut(400);

        // 当前li的兄弟元素li图片的变化
        $(this).siblings("li").stop().animate({
            width: 69
        }).find(".small").stop().fadeIn(400).siblings(".big").stop().fadeOut(400);
    });

 

布局

对于布局，我有点想说的话。不少时候咱们不知道要怎么取布局，不会从宏观考虑如何去布局排版，这是个很困扰人的东西，学习了一两个月我分析页面的能力依然是木有太大的进步啊，仍是会参考别人的代码，看看别人的实现思路。就好比这个案例，我本身想的是给定a的大小，把li撑开，可是当我调试动态效果时，就出现问题了，a的大小给定了，显示大图片时就出问题了。这时看了别人的代码是设置li的大小，让图片把a撑开，动画时改变li的宽度，图片就显示了。

布局的多看多练多思考，不少细节的地方须要本身去慢慢调不断的尝试，不断的去探索不一样的方式以及要转变考虑问题的角度，慢慢来吧。路漫漫其修远兮，吾将上下而求索。

 

最后附上案例的样式和结构

<style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        img {
            display: block;
        }

        a {
            text-decoration: none;
        }

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

        .content-nav {
            overflow: hidden;
        }

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

        .content-nav li.current {
            width: 224px;
        }

        .content-nav li.current .big {
            display: block;
        }

        .content-nav li.current .small {
            display: none;
        }

        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }

        .big {
            width: 224px;
            display: none;
        }
    </style>


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