jQuery手风琴案例（原创）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="king">
    <ul>
        <li class="current">
            <a href="#">
                <img src="https://www.jq22.com/img/cs/300x500-1.png" alt="" class="small">
                <img src="https://www.jq22.com/img/cs/500x300-1.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://www.jq22.com/img/cs/300x500-2.png" alt="" class="small">
                <img src="https://www.jq22.com/img/cs/500x300-2.png" alt="" class="big">
            </a>
        </li>
        <li class="current">
            <a href="#">
                <img src="https://www.jq22.com/img/cs/300x500-3.png" alt="" class="small">
                <img src="https://www.jq22.com/img/cs/500x300-3.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://www.jq22.com/img/cs/300x500-3.png" alt="" class="small">
                <img src="https://www.jq22.com/img/cs/500x300-3.png" alt="" class="big">
            </a>
        </li>
        <li class="current">
            <a href="#">
                <img src="https://www.jq22.com/img/cs/300x500-4.png" alt="" class="small">
                <img src="https://www.jq22.com/img/cs/500x300-4.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://www.jq22.com/img/cs/300x500-5.png" alt="" class="small">
                <img src="https://www.jq22.com/img/cs/500x300-5.png" alt="" class="big">
            </a>
        </li>
        <li class="current">
            <a href="#">
                <img src="https://www.jq22.com/img/cs/300x500-6.png" alt="" class="small">
                <img src="https://www.jq22.com/img/cs/500x300-6.png" alt="" class="big">
            </a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
  * {
    margin:0;
    padding:0;
}
img {
    display:block;
}
ul {
    list-style:none;
}
.king {
    width:852px;
    margin:100px auto;
    background:url(images/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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 鼠标进入(li)显示效果
$(function() {
    $('.king li').mouseover(function() {
        // 鼠标进入哪个li，这个li就变成224，同时让里面的大图显示，小图隐藏
        $(this).stop().animate({
            width: 224,
        }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();
        // 其他兄弟变成69，兄弟们的里面的小图显示，大图隐藏
        $(this).siblings().stop().animate({
            width: 69
        }).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut();
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

PROMULGATOR

Laughable?

相关代码

jQuery手风琴案例（原创）

最新