难点就是寻找变大之后的点击点
图片的长度 / 变得之后的长度 = 图片开始的点击点到图片的的开始位置的长度 / 图片变化之后的点
<!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="" οnclick="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>
扫一扫
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
