虫眼鏡ケースのJavaScriptオブジェクト指向実装

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

。小さい {
 幅: 400ピクセル;
 高さ: 400px;
 位置: 相対的;
 境界線:4px 実線 #ddd;
 ボックスの影: 0 0 5px rgba(0,0,0,.5);
}
.small画像{
 幅: 100%;
 高さ: 100%;
}
.small .grayBox{
 表示: なし;
 幅: 100ピクセル;
 高さ: 100px;
 ボックスの影: 0 0 10px rgba(0, 0, 0, 0.5);
 位置: 絶対;
 左: 0;
 上: 0;
} 
。大きい{
 幅: 400ピクセル;
 高さ: 400px;
 位置: 絶対;
 左: 700ピクセル;
 上: 100px;
 境界線:1px実線 #f10;
 表示: なし;
 オーバーフロー: 非表示;
}
.bigimg{
 位置: 絶対;
}

関数 Magnifier(){}

関数 init(){}

関数bindEvent(){}

関数 eleToggle(){}

関数eleMove(){}

新しい拡大鏡({
 小さいボックス: ".small",
 カッティングボックス: ".grayBox",
 big_box : ".big",
 big_img : 「.big img」
});

関数 Magnifier( オプション ) {
 // 受信したパラメータオブジェクトを処理するために初期化関数を呼び出します。this.init( options );
}

Magnifier.prototype.init = function(オプション){
 // 要素を初期化します。
 for(var attr in options){
  this[attr+"_ele"] = this.$(options[attr]);
 }
 // パフォーマンスを節約するために、offsetLeft を 1 回だけ取得します。
 this.small_box_offset = {
  左: this.small_box_ele.offsetLeft、
  上: this.small_box_ele.offsetTop、
  幅: parseInt( getComputedStyle(this.small_box_ele).width )、
  高さ: parseInt( getComputedStyle(this.small_box_ele).width )
 }
 this.cutting_box_offset = {
  幅: parseInt( getComputedStyle(this.cutting_box_ele).width )、
  高さ: parseInt( getComputedStyle(this.cutting_box_ele).height ),
 }
 this.big_box_offset = {
  幅: parseInt( getComputedStyle(this.big_box_ele).width )、
  高さ: parseInt( getComputedStyle(this.big_box_ele).height )、
 }
 // フラグ変数、マウスが虫眼鏡の中に移動するかどうか this.magnifier_start = false;
 このイベントをバインドします。
 // 画像スケーリング関数 this.scaleBigImg();
}

Magnifier.prototype.$ = function(セレクタ){
 document.querySelector(セレクタ) を返します。
}

Magnifier.prototype.bindEvent = function(){
 //マウスを左側のsmall_boxに移動する
 this.small_box_ele.addEventListener( "マウスオーバー" , function(){
  // cutting_box big_box 要素の表示;
  this.eleToggle("表示");
  // フラグ変数をtrueに変更する
  this.magnifier_start = true;
  // イベント関数内の this を変更して、現在のインスタンス オブジェクトを指すようにします}.bind(this));
 //マウスが左側のsmall_boxから外れます
 this.small_box_ele.addEventListener( "mouseout" , 関数(){
  // cutting_box big_box 要素は非表示です。
  this.eleToggle("非表示");
  this.magnifier_start = false;
 }.bind(これを));
 // マウスが動くと要素が動きます。
 this.small_box_ele.addEventListener("mousemove"、関数(evt){
  var e = evt || イベント;
  // ブラウザの表示領域からマウスポイントの xy 値を取得します。var x = e.clientX;
  var y = e.clientY;
  // 座標値を取得するには factoryPosition を呼び出します this.res = this.factoryPosition( x , y );
  // 処理した座標値をeleMoveメソッドに渡し、対応する左と上の値を変更します。this.eleMove( this.res );
 }.bind(これを)); 
 // スクロールホイールイベント;
 document.addEventListener("マウスホイール"、関数(evt){
  // マウスが虫眼鏡の中に移動しない場合、ホイールイベント関数は実行されません if(!this.magnifier_start){ return false }
  var e = evt || イベント;
  // スクロール ホイールが上 (ズーム アウト) か下 (ズーム イン) かを判断します。
  this.changeCutBoxScale( e.wheelDelta > 0 ? "狭い" : "大きい" );
 }.bind(これを));
}

Magnifier.prototype.eleToggle = function(type) {
 // タイプに応じて、要素の表示属性値を決定します: 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){
 // 受け取った x と y に基づいて、cutting_box の左と上のオフセットを計算します。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
 // 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;
 //最小境界監視;
 _left = _left <= 0 ? 0 : _left;
 _top = _top <= 0 ? 0 : _top
 // 最大値検出 _left = _left >= _left_max ? _left_max : _left;
 _top = _top >= _top_max ? _top_max : _top;
 // 処理された座標点の値と移動距離の最大値に対する比率係数を返します return {
  x : _左、
  y : _トップ、
  xp: _left / _left_max、
  yp:_top / _top_max
 }
}

Magnifier.prototype.eleMove = function(position_obj) {
 // 左のcutting_boxの移動範囲 this.cutting_box_ele.style.left = position_obj.x + "px";
 this.cutting_box_ele.style.top = position_obj.y + "px";
 // 大きな画像big_imgの移動範囲。 cutting_box と big_img の移動方向は逆です 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(){
 // 拡大率;
 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;
 // 拡大後の big_img の幅と高さを取得します。
 this.big_img_offset = {
  幅: width_p * this.small_box_offset.width、
  高さ: height_p * this.small_box_offset.height、
 }
 // big_img モーションの境界を計算します。
 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
 }
 // 画像の比例した幅と高さを設定します。
 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){
 スイッチ ( タイプ ) {
  // ケース「large」を拡大します:
   this.cutting_box_offset.width += 2;
   this.cutting_box_offset.height += 2;
   // マウスを中央に保つために、cutting_box を左上に移動します this.res.x --;
   this.res.y --; 
   壊す;
  // 狭いケース「narrow」:
   this.cutting_box_offset.width -= 2;
   this.cutting_box_offset.height -= 2;
   this.res.x++;
   this.res.y++;
   壊す;
  デフォルト：
   壊す;
 }
 this.cutting_box_ele.style.width = this.cutting_box_offset.width + "px";
 this.cutting_box_ele.style.height = this.cutting_box_offset.height + "px";
 // 位置が変更されたら、対応する比率計算ツールを呼び出します。
 このスケールのBigImg();
 // 大きな画像の動きを再計算します。
 this.ele を移動します。
}

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

// 異なる画像を表すすべてのボタンを選択します var btns = document.querySelectorAll(".btn");
// 小さいコンテナと大きいコンテナ内の img タグを選択します var imgs = document.querySelectorAll(".big img,.small img");
for(var i = 0; i < btns.length; i++){
 btns[i].onclick = 関数(){
  // 各ボタンの異なる data-src 属性を取得します。var src = this.getAttribute("data-src");
  for(var k = 0; k < imgs.length; k++){
   // 対応するsrc属性の属性値を置き換えます。imgs[k].src = src;
  }
 }
}