ポンクソフト

var DIV_W = 512; var DIV_H = 384; var IMG_W = 1024; var IMG_H = 768; DIV_W,DIV_Hは表示領域の幅と高さ、IMG_W,IMG_Hは画像の元の幅と高さです。 var zoomin = true; 拡大時にtrueになるフラグです。 $('div').css(); 表示領域の幅と高さを設定します。 $(this).animate(, 500); 縮小時の処理です。画像サイズ表示領域のサイズまで縮小するアニメーションを、長さ500msで行います。 var x = (e.pageX - $(this).offset().left) * (IMG_W / DIV_W) - DIV_W / 2; 拡大時には、まず画像の表示開始位置（左上）を求めます。offset()メソッドで要素のページ上の左上座標が返ります。pageXにはページ上のマウス座標が入るので、そこからoffset().leftを引くことにより、画像の左上からの相対X座標を求めることができます。さらに縮小率を掛けて中心座標としています。そこから表示領域の半分を引くことによって左上のX座標が求まるわけです。 if (x < 0) x = 0;if (x > IMG_W - DIV_W) x = IMG_W - DIV_W; 左右にはみださないようにしている部分です。 var y = (e.pageY - $(this).offset().top) * (IMG_H / DIV_H) - DIV_H / 2; if (y < 0) y = 0;if (y > IMG_H - DIV_H) y = IMG_H - DIV_H; Y座標も同じ方法で求めます。 $(this).animate(, 500); 画像サイズを元の大きさ、表示位置を先ほど求めたx, y座標にし、500msでアニメーションします。これによってマウスの地点を中心にした拡大が実現できます。

📎📎📎📎📎📎📎📎📎📎