クリックした場所をズームするサンプルを作ってみました。
今回作ったサンプル
http://jk0602.sakura.ne.jp/sample/zoom/
ソースコード
http://jk0602.sakura.ne.jp/sample/zoom/zoom.zip
※firefoxだとoffsetX、offsetYが使えなくてうまく動いていません・・・別途処理が必要。。。
index.html
<body>
<div class="wrapper">
<div class="content" zoom="off">
</div>
</div>
</body>
zoom.js
$(function(){
var click_x,click_y;
$(".content").click(function(e){
if($(this).attr("zoom")=="off"){
$(this).attr("zoom","on");
click_x = e.offsetX;
click_y = e.offsetY;
Zoom(2.0, click_x, click_y);
}else{
$(this).attr("zoom","off");
Zoom(1, click_x, click_y);
}
});
function Zoom(zoom, x, y){
$(".content").css({
"-moz-transition": "all 0s ease 0",
"-webkit-transition": "all 0s ease 0",
"-webkit-transform-origin": x+"px "+y+"px",
"transform-origin": x+"px "+y+"px",
});
setTimeout(function(){
$(".content").css({
"-moz-transition": "all 0.5s ease 0",
"-webkit-transition": "all 0.5s ease 0",
"-webkit-transform" : "scale("+zoom+")",
"transform" : "scale("+zoom+")",
});
},1);
}
});
大きなポイントは３点
①offsetX、offsetYでイベントが発生した要素上のX,Y座標を取得している
②「transform-origin」で拡大縮小させる中心座標を指定
③「"-webkit-transition": "all 0.5s ease 0"」「"-webkit-transform" : "scale("+zoom+")"」で0.5秒かけて拡大縮小のアニメーションをさせる
最初、以下のように「"transform-origin": x+"px "+y+"px"」と「"transform" : "scale("+zoom+")"」を同時にやっていたんですが、これだと、拡大する中心座標も0.5秒かけて移動してしまうので、スムーズに拡大アニメーションができませんでした。
なので、最初に拡大する中心座標を設定しておき、そのあと、拡大縮小させるようにしました。（上記プログラムでsetTimeoutを使っているところ）・・・ちょっと強引な気がするけれども。。。もっとスマートな方法ありそう。
function Zoom(zoom, x, y){
$(".content").css({
"-moz-transition": "all 0.5s ease 0",
"-webkit-transition": "all 0.5s ease 0",
"-webkit-transform-origin": x+"px "+y+"px",
"transform-origin": x+"px "+y+"px",
"-webkit-transform" : "scale("+zoom+")",
"transform" : "scale("+zoom+")",
});
}