jquery实现小图片放大效果

大致效果如下：

js部分：

首要是自己先引入jquery.js文件，可自行去官网找

<script src="jquery.js"></script>
	<script>
	$(window).on('load', function () {
    //1、当鼠标放至小图，出现黄色遮罩和右侧的大图
    $('.imgbox').on('mouseover', function (e) {
        $('.scale').css('display','block')
        $('.mask').css('display','block')
        //2、黄色遮挡层跟随鼠标功能
        $('.imgbox').on('mousemove',function (e) {
            // 鼠标在盒子里的坐标
            var x = e.pageX - $('.imgbox').offset().left
            var y = e.pageY - $('.imgbox').offset().top;
            // mask 最终的left和top值
            var maskX = x - $('.mask').width()/ 2;
            var maskY = y - $('.mask').height() / 2;

            var gapX = $('.imgbox').width() - $('.mask').width();
            var gapY = $('.imgbox').height() - $('.mask').height();

            if (maskX <= 0) {
                maskX = 0; // 黄色遮挡层不能超出左边框
            }else if (maskX >= gapX) {
                maskX = gapX; // 黄色遮挡层不能再右移
            }
            //Y同理
            if (maskY <= 0) {
                maskY = 0;
            }else if (maskY >= gapY) {
                maskY = gapY;
            }

            $('.mask').css('left',maskX + 'px')
            $('.mask').css('top',maskY + 'px')

            $('.scale img').css('left',-1 * maskX + 'px')
            $('.scale img').css('top',-1 * maskY + 'px')

        })
    })
    $('.imgbox').on('mouseleave', function () {
        $('.scale').css('display','none')
        $('.mask').css('display','none')
    })

})
	</script>

html:

(其中，图片自己找一张哈)

<div class="imgbox">
    <img style="height: 455px;width: 455px;" src="/img1.png" alt="">
    <div class='mask'></div>
    <div class="scale">
        <img src="/img1.png" alt="">
    </div>
</div>

css:

.imgbox{position: relative;width: 455px;height: 455px;border: 1px solid #ccc;}
.mask {display: none;position: absolute;top: 0;left: 0;width: 300px;height: 300px;background-color: #FEDE4F;opacity: .5;cursor: move;/* 鼠标按下时出现十字键头 */}
.scale {display: none;position: absolute;top: 0px;left: 460px;width: 600px;height: 600px;z-index: 999;/* 用z-index让它显示在最上层 */border:1px solid #ccc;overflow:hidden;  /* 超出盒子的部分隐藏 */}
.scale img {position:absolute;top:0;left:0;}