CloudGamer が作成した ImageZoom 画像拡大効果_画像特殊効果-jsチュートリアル-php.cn

通常、製品の写真を拡大して表示するために使用されます。Fanke、JD.com、Alibaba などでも同様の効果が利用できます。
利点は、元の画像に近い画像の一部を拡大して表示でき、マウスで表示領域を制御できることです。
少し前に sohighthesky の写真の拡大効果を見て、自分でも書きたいという衝動に駆られました。
このアプリには次の機能があります:
1. 元の画像を拡大するか、新しい画像を使用して大きな画像を設定することをサポートします。
2. 大きな画像をロードする前に、代わりに元の画像を使用します。操作の待ち時間を短縮します。
3. 大きな画像をズームするためのマウススクロールをサポートします。
5.表示ボックスを自動的に非表示にするかどうかを設定します。
6. プラグインフォームをサポートして、さらに多くの機能を実装します (詳細は次の記事で)。
互換性: ie6/7/8、firefox 3.6.2、opera 10.51、safari 4.0.4、chrome 4.1

コードをコピーコードは次のとおりです。

var style; 
if ( !viewer.clientWidth ) { 
var style = viewer.style = { 
 >display: style .display, 
position: style.position, 
visibility: style.visibility 
}; 
$$D.setStyle( viewer, { 
display: "block",位置: "絶対"、可視性: "非表示" 
} 
this._viewerWidth = viewer.clientWidth; 
this._viewerHeight = viewer.clientHeight; { $$D .setStyle( ビューア, スタイル ); } 
rangeWidth = Math.ceil(this._viewerWidth /scale );
rangeHeight = Math.ceil(this._viewerHeight /scale ); > 
 表示範囲は clientWidth/clientHeight を通じて取得されることに注意してください。 
表示ボックスが非表示状態で表示が none に設定されている場合、clientWidth/clientHeight を直接取得することはできません。 
この場合、プログラムは次のメソッドを使用して取得します: 
1、表示/位置/可視性の元の値を記録します。
2、それを「ブロック」/「絶対」/「非表示」に設定します。 " それぞれ、非表示と占有の両方が可能です。

3、パラメータを取得します。
4、元の値にリセットして元の状態に戻します。
表示範囲を取得したら、比率を合わせて範囲パラメータを取得します。
ps: これは、プレースホルダー以外の要素のサイズパラメーターを取得する一般的なメソッドであり、jquery の CSS もこのメソッドを使用して幅/高さを取得します。
比例計算後に小数を取得することもできますが、サイズは整数のみとなります。プログラムは常に Math.ceil を使用して四捨五入します。
【拡大効果】
すべての設定が完了したら、startを実行してトリガープログラムを設定します。
プログラムは、主に _start プログラムを元の画像オブジェクトのマウスオーバー/マウス移動にバインドする start メソッドを自動的に実行します。
var image = this._image, START = this._START; . addEvent(image, "mouseover", START );
$$E.addEvent(image, "mousemove", START );
は、元の画像オブジェクトに移動する場合と、元の画像上を移動する場合に対応します。それぞれオブジェクト。
追記:attachEvent を使用する場合は、同じ関数を繰り返しバインドするという問題にも注意する必要があります。ここでの addEvent にはこの問題はありません。
バインドされた _start プログラムは、主にいくつかのイベントのバインド解除とバインドに使用されます:

コードをコピー

コードは次のとおりです :

$$E.removeEvent(image, "mouseover", this._START ); $$E.removeEvent(image, "mousemove", this._START ); E.addEvent( document, "mousemove", this._MOVE ); $$E.addEvent( document, "mouseout", this._OUT );

window 拡大効果を終了するには、_OUT プログラムをドキュメントのマウスアウトにバインドします:

コードをコピー

コードは次のとおりです。 :

this._OUT = $$F.bindAsEventListener( function(e){ if ( !e.popularTarget ) this._END(); }, this マウスがドキュメントの外に移動すると、mouseout がトリガーされます。現在の関連ターゲットが null の場合、プログラムを終了するために _end の実行が遅れます: var oThis = this, END = function(){ oThis._end() };

this._END = function(){ oThis._timer = setTimeout( END, oThis.lay ) }; _end プログラムでは、が最初に実行され、バインドされている可能性のあるイベントがすべて削除され、その後 start メソッドを実行してトリガーを待ち続けます。

mousemove にバインドされた _move モバイル プログラムは、主にマウスが移動する場所にズームインする機能を実現するために使用されます。 
より多くの状況 (拡張の他のモードなど) に適応するために、ドキュメントにバインドされていますが、そのため、mouseout イベントを使用して削除プロセスをトリガーすることはできません。 
プログラムは、マウスの座標と元の画像を比較することによって、マウスが元の画像オブジェクトの範囲外に出たかどうかを判断します: 

コードをコピー

コードは次のとおりです:

 
var x = e.pageX, y = e.pageY, rect = this._rect; 
if ( x rect.right || y this._END(); 
} else { 
... 
} 

画像オブジェクトの場合は、_ENDを実行して拡大効果を終了します。
マウスが元の画像オブジェクト上で移動すると、座標が計算され、_repair プログラムを通じて位置決めに必要な値に変換されます。
最後に、表示ボックスに拡大したい部分が表示されるように、大きな画像の左/上の位置を設定します。
追記: 位置決めにscrollLeft/scrollTopを使ってみましたが、IEだとノコギリのような動きをしてしまい、大きくなるとそれが顕著になってしまうのでやめました。
[マウスのスクロールとズーム]
mouse 属性を true に設定すると、マウスのスクロールとズーム機能が有効になります。
拡大効果中に、マウスホイールを回転させると、大きな画像を拡大または縮小できます。
実際には、スクロールホイールパラメータの変更に応じて拡大率を変更するためです。
マウススクロールイベントについてはスライダーでも触れましたが、その時はieとffの違いだけを分析してみました。ここでもう一度分析してみましょう。
まず、IE はマウスホイールを使用してイベントをバインドし、イベントの WheelDelta を使用してスクロールパラメータを取得します。 < !DOCTYPE html>

< script>