鼠标经过或悬停时，图片放大；鼠标离开，图片缓慢还原。

点击查看代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬浮模块变大，移出还原</title>
</head>
<style>
    .pg{
        height:500px;
        width:700px;
        border:1px solid red;
        margin-top:100px;
        margin-left:100px;
    }
    .pg li{
        list-style:none;
        height:200px;
        width:200px;
        float:left;
        margin-left:10px;
        margin-top:50px;
    }
    .pg li a{
        display:block;
    }
    .pg .content{
        height:180px;
        width:180px;
        margin-top:10px;
        margin-left:10px;
        background-color:#dddddd;
    }
</style>
<body>
<div>
    <ul class="pg">
        <li>
            <a class="content"></a>
        </li>
        <li>
            <a class="content"></a>
        </li>
        <li>
            <a class="content"></a>
        </li>
    </ul>
</div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(document).ready(function(){
            $(".pg li").hover(
                function(){                         //变大
                    var v = $(this).index();        //找到鼠标悬浮li的index
                    $('a').eq(v).animate({
                        height:'220px',             //大小
                        width:'220px',
                        marginLeft:'-10px',         //位置
                        marginTop:'-10px',
                    });
                },
                function(){                          //恢复
                    var v = $(this).index();         //找到鼠标悬浮li的index
                    $('a').eq(v).stop().animate({    //恢复
                        height:'180px',              //大小
                        width:'180px',
                        marginLeft:'10px',           //位置
                        marginTop:'10px',
                    });
                }
                );
        });
    </script>
</body>
</html>
posted on 2022-03-17 17:23 寒梅煮雪阅读(432) 评论(0) 收藏举报