Q&A
画像をクリックし、マウスイベントにより座標を取得し
座標を中心に画像を拡大(css Styleを利用)する構造を作りたいと考えています
- index.html
<!DOCTYPE html> <html> <head> <title>zoom</title> <body> <img src = "https://teratail.storage.googleapis.com/assets/img/banner/bnr_expertSide.jpg" id = "teratail" onmousedown="click()"> </img> <script type = "text/javascript"> document.addEventListener("mousedown", function(e){ var zoom_px = e.offsetX + 'px, ' + e.offsetY + 'px, 0px '; console.log(zoom_px); var zoom = document.getElementById("teratail"); zoom.style.webkitTransform = "scale(2.0)"; // ↓ 反映されない zoom.style.WebkitTransformOrigin = zoom_px; // ↓ 反映される // zoom.style.WebkitTransformOrigin = "0px 200px 0px"; ; }); </script> </body> </html> </html>
zoom.style.WebkitTransformOrigin
の行で中心座標を設定したいのですが反映されません
取得した座標をWebkitTransformOriginに設定するにはどのように表記したら良いのでしょうか？
ご教授願います
- google chrome
- MacOS
使用
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/18 11:53