jQuery手风琴效果

最新推荐文章于 2022-11-28 10:26:52 发布

风向北吹i

最新推荐文章于 2022-11-28 10:26:52 发布

阅读量118

点赞数

文章标签： jquery js

本文链接：https://blog.csdn.net/qq_40576178/article/details/110099319

版权

需要引入jQuery文件

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>

    <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>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function(){
            //鼠标移动li上，改变当前li的宽度和图片  height:69
            $('li').mouseenter(function(){
                //1、改变当前li的宽度为 224，让兄弟元素宽度变为 69
                //2、改变当前元素为大图片(大图显示，小图隐藏)，让兄弟元素为小图片（小图显示，大图隐藏）

                $(this).stop().animate({width:'224px'},400).find('.big').stop().fadeIn(400);
                $(this).find('.small').stop().fadeOut(400);

                $(this).siblings().stop().animate({width:'69px'},400);
                $(this).siblings().find('.big').stop().fadeOut(400);
                $(this).siblings().find('.small').stop().fadeIn(400);
             })
        })
    </script>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/small_1.jpg" alt="" class="small">
                    <img src="images/big_1.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/small_2.jpg" alt="" class="small">
                    <img src="images/big_2.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/small_3.jpg" alt="" class="small">
                    <img src="images/big_3.png" alt="" class="big">
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

风向北吹i

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery手风琴效果

需要引入jQuery文件<!doctype html><html><head> <meta charset="utf-8"> <title>手风琴案例</title> <style type="text/css"> * { margin: 0; padding: 0; } img
复制链接

扫一扫