この記事では、参考までに、虫眼鏡のJavaScriptオブジェクト指向実装の具体的なコードを紹介します。具体的な内容は次のとおりです。 レンダリング実装原則分析図に示すように マウス移動イベントがトリガーされると、イベント オブジェクトの clientX プロパティと clientY プロパティに従って、リアルタイムの座標 x と y が取得されます。 基本的なページ構造<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 を移動します。 } 追加機能: 複数の画像を切り替え、対応する画像を拡大します。 <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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: さようなら Docker: 5 分で Containerd に移行する方法
>>: フレックスマルチカラムレイアウトで発生する問題と解決策の詳細な説明
背景: DBA として、大規模なテーブルの DDL 変更のほとんどは、Percona の pt-on...
ARGB は、アルファ (透明度) チャネルが追加された RGB カラー モードであり、32 ビット...
目次1. ミックスイン.scss 2. 単一ファイルの使用3. グローバルマウント3.1 依存関係の...
オンラインショッピングモールデータベース - ユーザー情報データ運用プロジェクトの説明電子商取引の台...
目次1. Reduxを選ぶ理由2. Reduxデータフロー3つの原則4. Reduxソースコード分析...
目次チュートリアルシリーズ1. MySQL アーキテクチャクエリキャッシュキャッシュされないクエリ:...
SpringBoot は巨大な Python のようで、ゆっくりと私たちの周りを巻きつき、麻痺させま...
クリック時に背景色を生成する要素の CSS スタイルに次のコードを追加します。 -webkit-ta...
この記事では、Docker を使用して Centos6 に Redis マスター/スレーブ データベ...
1 背景JDK1.8-u181とTomcat8.5.53がインストールされました。インストール後、環...
HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関...
では、早速レンダリングを見てみましょう。 コア コードはtransition: cubic-bezi...
まず、GIF 操作を見てみましょう。ケース1: スペースがフィルタリングされるスペースの代わりに角括...
ページ内のテーブルの幅を width="600px" に設定した後も、幅が固定さ...
目次charとvarcharの違いcharとvarcharの違い上記は、MySQL における cha...