JavaScript 虫眼鏡移動レンズ効果コード_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;


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