難點就是尋找變大之後的點擊點
圖片的長度 / 變得之後的長度 = 圖片開始的點擊點到圖片的的開始位置的長度 / 圖片變化之後的點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
#wrapper{
position: relative;
top:0%;
left: 0%;
}
#scale{
position: absolute;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="wrapper">
<img id="scale" src="1.jpg" alt="" onclick="myClick()">
</div>
<script>
function myClick(){
// debugger;
var img = document.getElementById("scale");
var mouseX = event.pageX - img.offsetLeft;
var mouseY = event.pageY - img.offsetTop;
var width = img.offsetWidth * 1.2;
var height = img.offsetHeight * 1.2;
var ratioW = img.offsetWidth / width;
var ratioH = img.offsetHeight / height;
var x = mouseX / ratioW;
var y = mouseY / ratioH;
var w = img.offsetLeft - (x - mouseX);
var h = img.offsetTop - (y - mouseY);
console.log(w);
console.log(h);
img.style.left = w +"px";
img.style.top = h + "px";
img.style.width = width+"px";
img.style.height = height+"px";
}
</script>
</body>
</html>