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>

function test(e){alert(e.type ":" e.detail "_" e.wheelDelta) } document.addEventListener( "DOMMouseScroll", test, false ); >document .addEventListener( "mousewheel", test, false );
少し下にスクロールすると、次の結果が表示されます:
ff: DOMMouseScroll:3_unknown
opera: Mousewheel:3_-120
chrome/safari: Mousewheel:0_-120
確認できますイベントバインディングについては、ff は DOMMouseScroll のみをサポートし、他のものはマウスホイールのみをサポートします。
スクロールパラメータの取得に関しては、ffはdetailのみサポート、operaは両方サポート、chrome/safariはwheelDeltaをサポートしています。
追伸: chrome/safari の詳細がなぜ 0 なのかわかりません。他に使い道はありますか?
DOMMouseScroll とマウスホイールのもう 1 つの違いは、前者は要素を直接バインドできないのに対し、後者は要素を直接バインドできることです。
つまり、elem.onmousewheel は可能ですが、elem.onDOMMouseScroll は不可能です。
上記の分析に基づいて、_start プログラムでは、_mouse プログラムは次のようにドキュメントのスクロールイベントにバインドされます。
this.mouse && $$E.addEvent( document, $$B.firefox ? "DOMMouseScroll " : "mousewheel", this._MOUSE );
_mouse プログラムで、ローリングパラメーターとカスタマイズされたレートスケーリング比に基づいて新しい倍率を取得します。
this._scale = ( e.wheelDelta ? e.wheelDelta / (-120) : (e.detail || 0) / 3 ) * this.rate;
比率を変更すると、プログラムのパラメーターも再計算する必要があります。
_rangeWidth/_rangeHeight は計算プロセスに影響するため、カスタムのデフォルト値に戻す必要があります:
var opt = this.options;
this._rangeWidth =
this。 _rangeHeight = opt.rangeHeight;
次に、_initSize と _initData を実行してサイズとパラメーターをリセットし、_move を実行して位置を変更します。
最後に、ページのスクロールがトリガーされないように、preventDefault を使用することを忘れないでください。
使用上のヒント
[画像設定]
プログラムは大きな画像をサポートしており、元の画像を拡大したり、新しい大きな画像を使用したりできます。
新しい大きな画像を使用し、その画像が比較的大きい場合は、プログラムが自動的に元の画像を使用して拡大してから、大きな画像をロードするように、拡大率を設定することを強くお勧めします。大きな画像がロードされるまで待機します。
また、新しい大きな画像の幅と高さの比率が元の画像と一致している必要があることに注意してください。そうでないと、元の画像を使用して拡大する場合、この問題は発生しません。
[表示フレームの設定]
表示フレームのサイズを設定するには 2 つの方法があります:
表示範囲を固定するには、最初に rangeWidth/rangeHeight を設定します。プログラムが表示フレームのサイズを計算します。 ;
表示ボックスの現在のサイズを使用して表示するには、rangeWidth/rangeHeight を設定しないか、0 に設定します。
【リセット】
さまざまな属性とオブジェクトの間には多くの関係があるため、多くの属性は直接変更できません。
プログラムは、特にそのような属性を変更するためのリセットメソッドをセットアップします。
プログラムのロード後に、元の画像のサイズや表示ボックスのサイズなど、プログラムの計算に影響するスタイルが変更された場合は、パラメーターと属性をリセットするリセットも実行する必要があります。。
【フローティング位置】
プログラムには表示フレームのフローティング位置を設定する機能がありません。必要に応じて自分で追加できます。
単純な配置の場合は、インスタンスメソッドを参照し、select のオーバーライドに注意してください。
より複雑なフローティング配置が必要な場合は、「フローティング配置プロンプト効果」を参照してください。
【opera のバグ】
テスト中に、opera 10.10 に 2 つのバグが見つかりました。
それぞれ、img 要素が透明に設定されている場合、背景画像が表示され、js を使用してマウススタイルを変更する際に問題が発生します。
ただし、これら 2 つの問題は 10.50 で修正されています。まだアップグレードしていない場合は、できるだけ早くアップグレードしてください。
【maxthon バグ】
maxthon 2.5.1 でのテスト中に問題が見つかりました。次のコードをテストしてください:

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

人気のチュートリアル

詳細>