jQuery实现手风琴特效

本文实例为大家分享了jquery实现手风琴的具体代码，供大家参考，具体内容如下

运用jQuery效果（功能如下）：

代码（链式编程）：

!DOCTYPE htML>
    html lang="en">
    head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, inITial-scale=1.0">
    title>
    Document/title>
    script src="../jquery-3.4.1.min.js">
    /script>
    style type="text/css">
* {
    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 {
    position: absolute;
    top: 0;
    left: 0;
    width: 69px;
    height: 69px;
    border-radius: 5px;
}
    /style>
    /head>
    body>
    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>
    /body>
    script>
$(function() {
//1.鼠标经过小li有两步操作：当前小li的宽度变为225px，同时里面的小图片淡出，大图片淡入//2.其余兄弟元素小li宽度变为69px，小图片淡入，大图片淡出$(".king li").mouseenter(function() {
$(this).stop().aniMATE({
width: 224}
    ).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
$(this).siblings("li").stop().animate({
width: 69}
    ).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
}
)}
    )/script>
    /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
• jquery插件制作 手风琴Panel效果实现
• jQuery制作效果超棒的手风琴折叠菜单
• jQuery实现的简单手风琴效果示例
• 基于Jquery代码实现手风琴菜单
• 基于jquery的slideDown和slideUp做手风琴
• jquery实现手风琴效果实例代码
• jquery手风琴特效插件
• Jquery组件easyUi实现手风琴(折叠面板)示例
• jquery实现手风琴效果

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！