JavaScript 虫眼鏡移動レンズ効果コード_JavaScript スキル

虫眼鏡は実現するのが難しい効果ではありませんが、精密な数値計算を必要とするため、より面倒です。今後、JavaScript 虫眼鏡シリーズについて、毎回 1 つずつ記事を書いていきます。
今回は、最初にサムネイル上でレンズを移動する方法を学びます (これは デモ)

サムネイルとレンズで構成される構造は次のとおりです。

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

画像をサムネイル コンテナに配置します。そして、レンズ ノードは、相対位置参照としてサムネイル コンテナを使用し、mousemove イベントがトリガーされたときにレンズの位置を変更します。つまり、これが必要な問題です。解決するには、サムネイル コンテナ内のレンズの左上隅の位置を計算します。 JavaScript コードは次のとおりです。

コードをコピーします。 🎜> コードは次のとおりです。

/**
* 拡大対象要素上のレンズの位置を取得します
* @param ev トリガーイベント
* @param サムサムネイルオブジェクト
* @param ガラスレンズオブジェクト
* @return x:拡大対象要素上のレンズの水平位置、y: 拡大対象要素上のレンズの垂直位置
*/
function getGlassOffset(ev,thumb,glass) {
var offset = {
left:0,
top:0
};

// offset
varthumbOffset = getCumulativeOffset(thumb)
// 上のマウスの位置ページ
var MousePoint = getMousePoint(ev);
// レンズの実際のサイズ
var glassSize = getSize(glass)
// サムネイルの実際のサイズ
var tinySize = getSize(thumb);

// カーソルの水平位置
varcursorX = MousePoint.x -thumbOffset.left;
/ / レンズの横方向のオフセット
offset.left =cursorX - glassSize.width / 2;
if(offset.left < 0) {
offset.left = 0;
} else if( offset.left > threadSize.width - glassSize.width) {
offset .left =thumbSize.width - glassSize.width;
}

// カーソルの垂直位置
varcursorY =mousePoint.y -thumbOffset.top;
// レンズの垂直オフセット
>offset.top =cursorY - glassSize.height / 2;
if(offset.top < 0) {
offset .top = 0;
} else if(offset.top > threadSize.height - glassSize.height) {
offset.top =thumbSize.height - glassSize.height;

return offset;


サムネイルコンテナ内のレンズの左上隅 = マウスの位置 - サムネイルの左上隅の位置 - レンズの半分のサイズ
レンズがコンテナの外に出たら、レンズを横に移動します。すべてのコードについては、

デモ
をご覧ください (前回の記事で、JS を介してマウスの位置を取得するためになぜ書いたか知っていますか?)
授業後に考えられるように質問を残しておきます。 、レンズに境界線がある場合、フレームがレンズの動きの精度に影響を与えないようにするにはどうすればよいですか？