JS_放大镜效果

效果图如下：

放大镜.gif

一、CSS看源码吧！

二、JS代码真没有什么解释的，注释很清晰，，，，自己看吧

<script>

    //1. 获取元素对象
    var box = document.getElementById("box");
    var smallBox = document.getElementById("smallBox");
    var bigBox = document.getElementById("bigBox");
    var bigImg = document.getElementById("bigImg");
    var mask = document.getElementById("mask");

    //2.鼠标经过小盒子 显示遮罩和大盒子 鼠标离开后隐藏
    smallBox.onmouseover = function () {
        mask.style.display = "block";
        bigBox.style.display = "block";
    };
    smallBox.onmouseout = function () {
        mask.style.display = "none";
        bigBox.style.display = "none";
    };

    //3.遮罩跟随鼠标坐标
    //鼠标在smallBox上移动的时候 获取鼠标在盒子中的坐标 然后设置mask的位置
    smallBox.onmousemove = function (event) {
        var event = event || window.event;
        //获取鼠标在页面中的坐标
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        //获取鼠标在盒子中的坐标
        //这里不能用smallBox.offsetLeft因为smallBox的offsetParent是box
        //而smallBox到box的offsetLeft是0 所以这里要用box.offsetLeft
        var boxX = pageX - box.offsetLeft;
        var boxY = pageY - box.offsetTop;
        //计算mask的坐标 让mask的中心跟着鼠标点走
        var maskX = boxX - mask.offsetWidth / 2;
        var maskY = boxY - mask.offsetHeight / 2;
        //3.限制遮罩的运动范围
        if (maskX < 0) {
            maskX = 0;
        }
        if (maskX > smallBox.offsetWidth - mask.offsetWidth) {
            maskX = smallBox.offsetWidth - mask.offsetWidth;
        }
        if (maskY < 0) {
            maskY = 0;
        }
        if (maskY > smallBox.offsetHeight - mask.offsetHeight) {
            maskY = smallBox.offsetHeight - mask.offsetHeight;
        }
        //console.log(maskX + "--" + maskY);
        //设置mask的位置
        mask.style.left = maskX + "px";
        mask.style.top = maskY + "px";

        //4.按照比例移动大图
        //大图能够移动的总距离 = 大图的宽度-大盒子的宽度
        var bigToMove = bigImg.offsetWidth - bigBox.offsetWidth;
        //mask能够移动的总距离 = 小盒子的宽度-mask的宽度
        var maskToMove = smallBox.offsetWidth - mask.offsetWidth;
        //rate = 大图能够移动的总距离/mask能够移动的总距离
        var rate = bigToMove / maskToMove;
        //大图应该到的位置  = rate * mask当前的位置 (移动方向相反所以是负数)
        bigImg.style.left = -rate * maskX + "px";
        bigImg.style.top = -rate * maskY + "px";

    };

</script>

三、源码下载：吻我