标签：king -- stop Jqueru li width big small 手风琴

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>

标签：king,--,stop,Jqueru,li,width,big,small,手风琴
来源： https://blog.csdn.net/Messchao/article/details/120539844

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。