JavaScript - 京东放大镜效果：鼠标移动查看图片放大细节

Codefreyy

已于 2022-03-22 08:05:23 修改

阅读量1.3k

点赞数

分类专栏：课程案例文章标签： javascript 前端 css html

于 2022-03-21 22:55:11 首次发布

本文链接：https://blog.csdn.net/godfreyyyy/article/details/123648773

版权

本文介绍了如何使用JavaScript实现前端的京东放大镜效果，通过鼠标移动查看图片的放大细节，内容包括JS代码实现和框架应用。

摘要由CSDN通过智能技术生成

效果

JS代码

window.addEventListener('load', function () {
    //获取元素
    var small = document.querySelector('.preview-img');
    var big = document.querySelector('.belt');
    var mask = document.querySelector('.mask');
    var img = document.querySelector('.belt img');

    //1、当鼠标按下小图时，出现黄色遮罩和右侧的大图
    small.addEventListener('mousedown', function (e) {
        //在css里面设置为none了
        big.style.display = 'block';
        mask.style.display = 'block';

        //2、黄色的遮挡层跟随鼠标功能，把鼠标在盒子内的坐标(x,y) 给 黄色遮挡层的中心（X,Y)
        small.addEventListener('mousemove', move);
        function move(e) {
            //(1)计算鼠标在盒子里的坐标
            var x = e.pageX - small.offsetLeft;
            var y =