JavaScript object-oriented implementation of magnifying glass case

<div class="small">
 <img src="images/timg.jpg" alt="">
 <span class="grayBox"></span>
</div>
<div class="big">
 <img src="images/timg.jpg" alt="">
</div>

.small {
 width: 400px;
 height: 400px;
 position: relative;
 border:4px solid #ddd;
 box-shadow: 0 0 5px rgba(0,0,0,.5);
}
.small img{
 width: 100%;
 height: 100%;
}
.small .grayBox{
 display: none;
 width: 100px;
 height: 100px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 position: absolute;
 left: 0;
 top: 0;
} 
.big{
 width: 400px;
 height: 400px;
 position: absolute;
 left: 700px;
 top: 100px;
 border:1px solid #f10;
 display: none;
 overflow: hidden;
}
.bigimg{
 position: absolute;
}

function Magnifier(){}

function init(){}

function bindEvent(){}

function eleToggle(){}

function eleMove(){}

new Magnifier({
 small_box : ".small",
 cutting_box : ".grayBox",
 big_box : ".big",
 big_img : ".big img"
});

function Magnifier( options ) {
 // Call the initialization function to process the received parameter object this.init( options );
}

Magnifier.prototype.init = function( options ){
 // Initialize elements;
 for(var attr in options){
  this[attr+"_ele"] = this.$(options[attr]);
 }
 // In order to save performance, only get offsetLeft once;
 this.small_box_offset = {
  left : this.small_box_ele.offsetLeft,
  top : this.small_box_ele.offsetTop,
  width : parseInt( getComputedStyle(this.small_box_ele).width ),
  height : parseInt( getComputedStyle(this.small_box_ele).width )
 }
 this.cutting_box_offset = {
  width : parseInt( getComputedStyle(this.cutting_box_ele).width ),
  height : parseInt( getComputedStyle(this.cutting_box_ele).height ),
 }
 this.big_box_offset = {
  width : parseInt( getComputedStyle(this.big_box_ele).width ),
  height : parseInt( getComputedStyle(this.big_box_ele).height ),
 }
 // Flag variable, whether the mouse moves into the magnifying glass this.magnifier_start = false;
 this.bindEvent();
 // Image scaling function this.scaleBigImg();
}

Magnifier.prototype.$ = function(selector){
 return document.querySelector(selector);
}

Magnifier.prototype.bindEvent = function(){
 //Move the mouse into the small_box on the left
 this.small_box_ele.addEventListener( "mouseover" , function(){
  // cutting_box big_box element display;
  this.eleToggle("show");
  // Change the flag variable to true
  this.magnifier_start = true;
  // Modify the this in the event function to point to the current instance object}.bind(this));
 //Mouse moves out of the small_box on the left
 this.small_box_ele.addEventListener( "mouseout" , function(){
  // cutting_box big_box element is hidden;
  this.eleToggle("hide");
  this.magnifier_start = false;
 }.bind(this));
 // Mouse moves, element moves;
 this.small_box_ele.addEventListener("mousemove" , function( evt ){
  var e = evt || event;
  // Get the xy value of the mouse point from the browser's visible area var x = e.clientX;
  var y = e.clientY ;
  // Call factoryPosition to get the coordinate value this.res = this.factoryPosition( x , y );
  // Pass the processed coordinate values ​​to the eleMove method and change the corresponding left and top values ​​this.eleMove( this.res );
 }.bind(this)); 
 // Scroll wheel event;
 document.addEventListener("mousewheel" , function( evt ){
  // If the mouse does not move into the magnifying glass, the wheel event function will not be executed if(!this.magnifier_start){ return false }
  var e = evt || event;
  // Determine whether the scroll wheel is up (zoom out) or down (zoom in);
  this.changeCutBoxScale( e.wheelDelta > 0 ? "narrow" : "large" );
 }.bind(this));
}

Magnifier.prototype.eleToggle = function( type ) {
 // According to the type type, determine the display attribute value of the element: block | none
 this.cutting_box_ele.style.display = type === "show" ? "block" : "none";
 this.big_box_ele.style.display = type === "show" ? "block" : "none";
}

Magnifier.prototype.factoryPosition = function( x , y ){
 // Calculate the left and top offsets of cutting_box based on the received x and y var _left = x - this.small_box_offset.left - this.cutting_box_offset.width / 2;
 var _top = y - this.small_box_offset.top - this.cutting_box_offset.height / 2
 // The maximum value of left and top of cutting_box var _left_max = this.small_box_offset.width - this.cutting_box_offset.width;
 var _top_max = this.small_box_offset.height - this.cutting_box_offset.height;
 //Minimum boundary monitoring;
 _left = _left <= 0 ? 0 : _left;
 _top = _top <= 0 ? 0 : _top
 // Maximum value detection _left = _left >= _left_max ? _left_max : _left;
 _top = _top >= _top_max ? _top_max : _top;
 // Return the processed coordinate point value and the ratio coefficient of the moving distance to the maximum value return {
  x : _left,
  y : _top,
  xp: _left / _left_max,
  yp:_top / _top_max
 }
}

Magnifier.prototype.eleMove = function( position_obj ) {
 // Left cutting_box moving range this.cutting_box_ele.style.left = position_obj.x + "px";
 this.cutting_box_ele.style.top = position_obj.y + "px";
 // The moving range of the big image big_img. The moving directions of cutting_box and big_img are opposite this.big_img_ele.style.left = -position_obj.xp * this.big_img_boundary.left_max + "px";
 this.big_img_ele.style.top = -position_obj.yp * this.big_img_boundary.top_max + "px";
}

Magnifier.prototype.scaleBigImg = function(){
 // Enlargement ratio;
 var width_p = this.big_box_offset.width / this.cutting_box_offset.width;
 var height_p = this.big_box_offset.height / this.cutting_box_offset.height;
 // Get the width and height of big_img after enlargement;
 this.big_img_offset = {
  width : width_p * this.small_box_offset.width,
  height : height_p * this.small_box_offset.height,
 }
 // Calculate the boundaries of big_img motion;
 this.big_img_boundary = {
  left_max : this.big_img_offset.width - this.big_box_offset.width,
  top_max : this.big_img_offset.height - this.big_box_offset.height
 }
 // Set proportional width and height for the image;
 this.big_img_ele.style.width = this.big_img_offset.width + "px";
 this.big_img_ele.style.height = this.big_img_offset.height + "px";
}

Magnifier.prototype.changeCutBoxScale = function( type ){
 switch ( type ) {
  // Enlarge case "large":
   this.cutting_box_offset.width += 2;
   this.cutting_box_offset.height += 2;
   // Move cutting_box to the left and up to keep the mouse in the center this.res.x --;
   this.res.y --; 
   break;
  // Narrow case "narrow":
   this.cutting_box_offset.width -= 2;
   this.cutting_box_offset.height -= 2;
   this.res.x++;
   this.res.y++;
   break;
  default:
   break;
 }
 this.cutting_box_ele.style.width = this.cutting_box_offset.width + "px";
 this.cutting_box_ele.style.height = this.cutting_box_offset.height + "px";
 // After the position changes, call the corresponding ratio calculation tool;
 this.scaleBigImg();
 // Recalculate the large image motion;
 this.eleMove(this.res);
}

<button class="btn" data-src=""><img src="" alt=""></button>
<button class="btn" data-src=""><img src="" alt=""></button>

// Select all buttons representing different pictures var btns = document.querySelectorAll(".btn");
// Select the img tags in the small and big containers var imgs = document.querySelectorAll(".big img,.small img");
for(var i = 0 ; i < btns.length ; i ++){
 btns[i].onclick = function(){
  // Get the different data-src attributes on each button var src = this.getAttribute("data-src");
  for(var k = 0 ; k < imgs.length ; k ++){
   // Replace the attribute value of the corresponding src attribute imgs[k].src = src;
  }
 }
}