為啥我的移動功能實現(xiàn)不了，求幫看，縮小放大都是可以的，就是移動那部分不行，求指導
為啥我的移動功能實現(xiàn)不了，求幫看，縮小放大都是可以的，就是移動那部分不行，求指導
<!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("已經(jīng)是最大的了，親");
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("已經(jīng)是最小的了，親");
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("已經(jīng)是最右的，親");
clearInterval(moverTimer);
}
}else{
clearInterval(moverTimer);
}
},20);
}
}
</script>
</body>
</html>
2016-07-13
親 你的圖片沒有絕對定位?style="position:absolute;left:0;top:0"
2017-06-14
雖然時間有點久遠，但還是補充下。元素移動并不是需要定位position：absolute/relative等，關鍵在于你的移動方式。該課程使用的是img.style.left ?而left top等方位屬性是在定位情況才有用。但你一樣可以使用margin-left屬性，就是img.style.marginLeft，該屬性修改外邊距，什么時候都能使用。題主一年前提的問題，估計現(xiàn)在都是大神了，請忽略，給后來者看的，避免閱讀者誤會。