滑过换图片加放大镜

js部分

// 当鼠标进入原图时

var objImg = [
    { imgUrl: '../img/商品详情页/shangpin1.jpg' },
    { imgUrl: '../img/商品详情页/shangpin2.jpg' },
    { imgUrl: '../img/商品详情页/shangpin3.jpg' },
    { imgUrl: '../img/商品详情页/shangpin4.jpg' },
    { imgUrl: '../img/商品详情页/shangpin5.jpg' },
]
var serImg = ''
for (let i = 0; i < objImg.length; i++) {
    serImg += `<li class="bod${i}"><img src="${objImg[i].imgUrl}" alt=""></li>`


}
$('.img-pasI').html(serImg)

//  商品滑过更换图片
function active() {

    for (let j = 1; j <= 5; j++) {
        // $(".fagnda").html('');

        $('.bod' + (j - 1)).hover(function () {
            $(this).addClass('bor').siblings().removeClass('bor')
            var insertImg = ''
            var insertFImg = ''
            insertImg = `<img src="../img/商品详情页/shangpin${j}.jpg" alt="" width="360">`
            insertFImg = `
            <img src="../img/商品详情页/shangpin${j}.jpg" alt="" style="position: absolute;" width="1200">
            `
            $('.fagnda').html(insertImg)
            $('.particulars-left-top-amplification').html(insertFImg)
        })
    }
}
active();




$('.particulars-left-top').mouseover(
    function (e) {
        $('.particulars-left-top-amplification').css('display', 'block');
        $('.magnifier').css('display', 'block');
    })

// 当鼠标在原图窗口中移动时
$('.particulars-left-top').mousemove(function (e) {

    // 获取鼠标当前的位置
    var pageX = e.pageX;
    var pageY = e.pageY;
    // 获取原图窗口在整个文档中的偏移位置
    var offsetX = $('.particulars-left-top').offset().left;
    var offsetY = $('.particulars-left-top').offset().top;
    // 计算鼠标在原图中的相对位置
    var relativeX = pageX - offsetX;
    var relativeY = pageY - offsetY;

    // 计算鼠标在放大镜框中的位置
    var magOffsetX = $('.magnifier').width() / 2;
    var magOffsetY = $('.magnifier').height() / 2;
    $('.magnifier').css({
        left: relativeX - magOffsetX + 'px',
        top: relativeY - magOffsetY + 'px'
    })

    // 获取放大镜框的新的位置
    var magX = $('.magnifier').position().left;
    var magY = $('.magnifier').position().top;

    // 处理越界情况

    // 确定边界

    var maxMagX = $('.particulars-left-top').width() - $('.magnifier').width()
    var maxMagY = $('.particulars-left-top').height() - $('.magnifier').height()
    // 左边界
    if (magX <= 0) {
        $('.magnifier').css('left', '0px')
    }
    // 右边界
    if (magX >= maxMagX) { $('.magnifier').css('left', maxMagX + 'px'); }

    // 上边界
    if (magY <= 0) { $('.magnifier').css('top', '0px') }

    // 下边界
    if (magY >= maxMagY) { $('.magnifier').css('top', maxMagY + 'px'); }

    // 按照之前确定的缩放比例移动“原图”窗口中的图片
    // 注意：图片的移动方向与鼠标的移动方向是相反的！
    var originX = magX * 3;
    var originY = magY * 3;
    $('.particulars-left-top-amplification img').css({ left: -originX + 'px', top: -originY + 'px' })
})
// 当鼠标离开“缩略图”窗口时，隐藏“原图”窗口和“放大镜”框
$('.particulars-left-top').mouseout(function () {
    $('.particulars-left-top-amplification').css('display', 'none');
    $('.magnifier').css('display', 'none');
})

HTML部分

 <div class="magnifying_glass">
                            <div class="particulars-left-top">
                                <div class="fagnda"></div>
                                <!-- 放大镜的框 -->
                                <div class="magnifier"></div>
                            </div>
                            <div class="particulars-left-top-amplification ">
                                <!-- <img src="" alt="" style="position: absolute;" width="1000"> -->
                            </div>
                        </div>