鼠标指向图片，图片跟随鼠标右侧放大移动

<img src="/upload/2021-7/2021720951511561.png" class="small" width="32" height="32">

<script>
    $(function () {
        $(".small")
            // 当鼠标移至小图片的时候显示大图片
            .mouseover(function () {
                var imgpath = $(this).attr('src');
                $("#showBig").show();
                $('#showBig img').attr('src',imgpath);
            })
            // 当鼠标在小图片中移动的同时设置大图片对于当前视口的相对偏移量。
            .mousemove(function (event) {
                // 设置大图片的偏移量offset中必需规定以像素计的top和left坐标。
                // 获取到小图片event事件中pageX/pageY鼠标相对于文档的左/右边缘的位置。
                // 并同时赋值给大图片offset的top和left坐标值以达到移动跟随的效果
                $("#showBig").offset({top: event.pageY + 10, left: event.pageX + 10});
            })
            // 当鼠标移出小图片的时候隐藏大图片
            .mouseout(function () {
                $("#showBig").hide();
            });
    });
</script>
<style type="text/css">
    #showBig {
        position: absolute;
        display: none;
    }
</style>
<div id="showBig">
    <img src="" style="max-width: 450px;"/>
</div>