实现放大镜效果

重点理解clientX和offsetX区别，和面向对象编程思想

附上js代码
window.onload = function () {
    var $ = function (name) {
        return document.querySelector(name);
    }
    var small_pic = $(".small_pic"), slider = $(".slider"), big_pic = $(".big_pic"), big_img = $(".big_img");
    var test=$(".test"),text=$(".text");
    small_pic.onmousemove = function (event) {
        slider.style.display = "block";
        big_pic.style.display = "block";
        // var left =event.offsetX;
        // var top =event.offsetY;
        // ！！！！这里我会纠结于为啥不使用offsetX，因为当前情况下offsetX是鼠标相对于slider左侧的距离，而非相对于small_pic左侧的距离
        var left = event.clientX - slider.offsetWidth / 2;
        //当前鼠标距离浏览器左边缘的位置-滑块的宽度的一半（前提是当前外部盒子没有设置margin等，左侧和浏览器左侧是贴合的，如果有margin-left，需要event.clientX-mL值）
        var top = event.clientY - slider.offsetHeight / 2;
        var maxL =  small_pic.offsetWidth - slider.offsetWidth ;
        var maxT =  small_pic.offsetHeight - slider.offsetHeight ;
        text.innerHTML=str;
        if (left < 0) {
            left = 0;
        } else if (left >= maxL) {
            left = maxL
        };
        if (top < 0) {
            top = 0;
        } else if (top >= maxT) {
            top = maxT
        }
        slider.style.left = left + 'px';
        slider.style.top = top + 'px';
        big_img.style.left = -(left * 2) + 'px';   //右侧大图的距离
        big_img.style.top = -(top * 2) + 'px';
    }

    small_pic.onmouseleave = function (e) {
        slider.style.display = "none";
        big_pic.style.display = "none";
    }

}

使用面向对象方式编程：这样的好处是如果一些功能的代码比较多，可以单独写一个js，引入之后去调用内部方法，也可以增加复用性

// var obj={
//     init:function(){
// 初始化
//     },
//     bind:function(){
// 事件绑定
//     },
//     fun:function(){
// 选择器的封装
//     }
// }


var obj = {
    getDom: function (name) {
        return document.querySelector(name);
    },
    init: function () {
        var $ = this.getDom;
        var small_pic = $(".small_pic"), slider = $(".slider"), big_pic = $(".big_pic"), big_img = $(".big_img");
        this.mouseMove(small_pic,slider,big_pic,big_img);
        this.mouseOut(small_pic,slider,big_img);
    },
    mouseMove: function (small_pic,slider,big_pic,big_img) {
        small_pic.onmousemove = function (event) {
            slider.style.display = "block";
            big_pic.style.display = "block";
            // var left =event.offsetX;
            // var top =event.offsetY;
            var left = event.clientX - 100 - slider.offsetWidth / 2;//当前鼠标距离浏览器的位置-
            var top = event.clientY - slider.offsetHeight / 2;
            var maxL = small_pic.offsetWidth - slider.offsetWidth;
            var maxT = small_pic.offsetHeight - slider.offsetHeight;
            if (left < 0) {
                left = 0;
            } else if (left >= maxL) {
                left = maxL
            };
            if (top < 0) {
                top = 0;
            } else if (top >= maxT) {
                top = maxT
            }
            slider.style.left = left + 'px';
            slider.style.top = top + 'px';
            big_img.style.left = -(left * 2) + 'px';   //右侧大图的距离
            big_img.style.top = -(top * 2) + 'px';
        }
    },
    mouseOut: function (small_pic,slider,big_pic) {
        small_pic.onmouseleave = function (e) {
            slider.style.display = "none";
            big_pic.style.display = "none";
        }
    }
}



window.onload = function () {
    obj.init();
}