Question

如果我第一次单击+或 - 按钮，下面的脚本正在使用变换比例缩放图像。第二次单击按钮它不会缩放。如何在成功点击上缩放图像？ HTML

<div="myImage">
<input type="button" value="+" onclick="javascript:btnZoomInplus();"/>
<input type="button" value="-" onclick="javascript:btnZoomOutminus();"/>

<img src="vegetable.jpg"/>
</div>

脚本

function btnZoomInplus(){   
        document.getElementById('myDiv1').style.webkitTransform = 'scale(1)';               
}
 function btnZoomOutminus(){     
  document.getElementById('myDiv1').style.webkitTransform = 'scale(0.5)';
}

Answer 1

我认为你会想要保持乘数变量。变换始终应用于原始内容，因此您可以将其转换为1

var multiplier = 1;
function btnZoomInplus(){  
   multiplier = multiplier + 0.5;
   zoom();             
}

function btnZoomOutminus(){     
   multiplier = multiplier - 0.5;
   zoom();
}

function zoom() {

   document.getElementById('myDiv1').style.webkitTransform = 'scale('+ multiplier +')';  
}

同样可以缩小。

当然，您可以添加不低于0但不高于某个最大缩放量的支票。

多次缩放图像

1 个答案: