为啥我的移动功能实现不了，求帮看，缩小放大都是可以的，就是移动那部分不行，求指导
为啥我的移动功能实现不了，求帮看，缩小放大都是可以的，就是移动那部分不行，求指导
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js 图片缓慢缩放效果</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width initial-scale=1">
</head>
<body>
<div style="width:400px; margin:0 auto;">
<img src="images/2.jpg" id="myImage" /><br/>
<input type="button" id="max" value="放大" />
<input type="button" id="min" value="缩小" />
<input type="button" id="mover" value="右移动"/>
</div>
<script type="text/javascript">
window.onload = function () {
var maxBtn = document.getElementById("max");
var minBtn = document.getElementById("min");
var moverBtn = document.getElementById("mover");
maxBtn.onclick = function () {
maxFun();
}
minBtn.onclick = function(){
minFun();
}
moverBtn.onclick = function(){
moverFun();
}
var img = document.getElementById("myImage");
var maxWidth = img.width*3;
var maxHeight = img.height*3;
var minWidth = img.width*0.5;
var minHeight = img.height*0.5;
var overLeft = 700;
function maxFun() {
var endWidth = img.width*1.3;
var endHeight = img.height*1.3;
// 每隔20ms增加5%
var maxTimer = setInterval(function () {
if (img.width < endWidth) {
if (img.width < maxWidth) {
// 将图片等比缩小5%；>1:放大 <1:缩小
img.width = img.width*1.05;
img.height = img.height*1.05;
}else{
alert("已经是最大的了，亲");
clearInterval(maxTimer);
}
}else{
clearInterval(maxTimer);
}
},20);
}
function minFun(){
var endWidth = img.width*0.7;
var stratHeight = img.height*0.7;
var minTimer = setInterval(function(){
if (img.width > endWidth) {
if (img.width > minWidth) {
img.width = img.width*0.95;
img.height = img.height*0.95;
}else{
alert("已经是最小的了，亲");
clearInterval(minTimer);
}
}else{
clearInterval(minTimer);
}
},20);
}
function moverFun(){
var endLeft = img.offsetLeft + 200;
var moverTimer = setInterval(function(){
var imgLeft = img.offsetLeft;
if (imgLeft < endLeft) {
if (imgLeft < overLeft) {
img.style.left = imgLeft + 20 +"px";
}else{
alert("已经是最右的，亲");
clearInterval(moverTimer);
}
}else{
clearInterval(moverTimer);
}
},20);
}
}
</script>
</body>
</html>
