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

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

この記事では、参考までに、虫眼鏡のJavaScriptオブジェクト指向実装の具体的なコードを紹介します。具体的な内容は次のとおりです。

レンダリング

実装原則分析

図に示すように

マウス移動イベントがトリガーされると、イベント オブジェクトの clientX プロパティと clientY プロパティに従って、リアルタイムの座標 x と y が取得されます。
値から、 small_box の offsetLeft 値cuting_box の幅の半分を引いた値が、cutting_box の offset left 値になります。top 値についても同様です。 cutting_box が右辺と下辺に到達すると、左辺と上辺が最大値に到達します。リアルタイムで変化する左と上の値をそれぞれの最大値と比較することで比率を取得し、この比率を使用して右側の big_img 要素の左と上を計算します。具体的な方法は、まず拡大後の big_img の幅と高さを調べ、次にこの幅と高さを使用して big_img の左と上の最大値を取得します。この最大値に上記の比率値を掛けると、big_img の対応する左と上の値が得られます。
注: big_img を拡大した後の幅と高さを計算する方法
small_box の幅と高さ / cutting_box = big_img の幅と高さ / big_box の幅と高さ。 (big_imgの幅と高さのみ不明)

基本的なページ構造

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

CSSコード

。小さい {
 幅: 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{
 位置: 絶対;
}

オブジェクト指向実装

分析(OOA)

  • 要素選択機能
  • バインディングイベントドライバー
  • 要素の表示と非表示
  • 小さい画像が動き、大きい画像がズームインして動きに追従する機能
  • マウスホイールズーム機能

デザイン(OOD)

コンストラクタ

関数 Magnifier(){}

各機能モジュールを初期化する

関数 init(){}

イベントバインディング関数

関数bindEvent(){}

要素の表示と非表示

関数 eleToggle(){}

小さい画像が動き、大きい画像が拡大して機能に従う

関数eleMove(){}

ライティング(OOP)

  • まず、すべての関数を虫眼鏡コンストラクターのプロトタイプに配置する必要があることは明らかです。
  • 次に、オブジェクトをインスタンス化するときに、次に示すように、オブジェクト タイプのパラメーターを渡す必要があります。
新しい拡大鏡({
 小さいボックス: ".small",
 カッティングボックス: ".grayBox",
 big_box : ".big",
 big_img : 「.big img」
});

コンストラクターは、インスタンス化中に渡されたパラメーターを受け取る必要があります。

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

初期化関数は初期化要素を完了し、small_box、cutting_box、big_boxのオフセットシリーズの値を取得します。

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";
}

マウスを動かしたときに得られる座標点の x 値と y 値を処理します。

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";
}

マウス ホイールをスクロールするときに、左側の cutting_box のサイズも同時に変更する必要があります。

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 を移動します。
}

追加機能: 複数の画像を切り替え、対応する画像を拡大します。
タグを追加: 異なる画像パスを保存するための data-src カスタム属性

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

最後に、虫眼鏡オブジェクトをインスタンス化した後、各ボタンにクリックまたは移動イベントをバインドし、小さいコンテナーと大きいコンテナーの img の src 属性値を、対応する data-src 属性値に置き換えるだけです (以下を参照)。

// 異なる画像を表すすべてのボタンを選択します 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;
  }
 }
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Javascript サンプル プロジェクトでの虫眼鏡効果の実装プロセス
  • JavaScript で虫眼鏡の特殊効果を実現
  • JavaScript が Jingdong の虫眼鏡の特殊効果を模倣
  • JavaScript が Jingdong の虫眼鏡効果を模倣
  • JavaScript が Taobao の虫眼鏡効果を模倣
  • 虫眼鏡効果を実現するJavaScript
  • js で虫眼鏡効果を実現するためのアイデアとコード
  • 虫眼鏡の詳細のJavaScript実装

<<:  さようなら Docker: 5 分で Containerd に移行する方法

>>:  フレックスマルチカラムレイアウトで発生する問題と解決策の詳細な説明

推薦する

MySQLオンラインDDL gh-ostの使用の概要

背景: DBA として、大規模なテーブルの DDL 変更のほとんどは、Percona の pt-on...

ARGB、RGB、RGBAの違いと紹介

ARGB は、アルファ (透明度) チャネルが追加された RGB カラー モードであり、32 ビット...

Vue が scss (mixin) をグローバルに導入

目次1. ミックスイン.scss 2. 単一ファイルの使用3. グローバルマウント3.1 依存関係の...

SQL 実践演習: オンライン モール データベース ユーザー情報データ操作

オンラインショッピングモールデータベース - ユーザー情報データ運用プロジェクトの説明電子商取引の台...

JavaScript 状態コンテナ Redux の詳細な説明

目次1. Reduxを選ぶ理由2. Reduxデータフロー3つの原則4. Reduxソースコード分析...

MySQL シリーズ 9 MySQL クエリ キャッシュとインデックス

目次チュートリアルシリーズ1. MySQL アーキテクチャクエリキャッシュキャッシュされないクエリ:...

Tomcatの動作原理を分析する

SpringBoot は巨大な Python のようで、ゆっくりと私たちの周りを巻きつき、麻痺させま...

CSS は、モバイル端末でクリックされたときに生成された要素の背景色を削除します (推奨)

クリック時に背景色を生成する要素の CSS スタイルに次のコードを追加します。 -webkit-ta...

CentOS 6 は Docker を使用して Redis マスター スレーブ データベース操作例を展開します

この記事では、Docker を使用して Centos6 に Redis マスター/スレーブ データベ...

Tomcat で複数の war パッケージを展開する方法と手順

1 背景JDK1.8-u181とTomcat8.5.53がインストールされました。インストール後、環...

コードをセマンティックにする HTML のヒント

HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関...

CSS3+ベジェ曲線でスケーラブルな入力検索ボックス効果を実現

では、早速レンダリングを見てみましょう。 コア コードはtransition: cubic-bezi...

MySQLインジェクションバイパスフィルタリング技術の概要

まず、GIF 操作を見てみましょう。ケース1: スペースがフィルタリングされるスペースの代わりに角括...

テーブルの幅を固定して、テキストによって幅が変わらないように設定

ページ内のテーブルの幅を width="600px" に設定した後も、幅が固定さ...

面接官がmysqlのcharとvarcharの違いを尋ねたとき

目次charとvarcharの違いcharとvarcharの違い上記は、MySQL における cha...