JavaScript中的zoom in和zoom out按钮

发布网友发布时间：2022-09-30 22:43

共1个回答

热心网友时间：2024-11-29 07:31

<html>
<body>
<input type="button" value="+" onclick="zoomOut()">
<input type="button" value="-" onclick="zoomIn()">
<input type="text" id="asd">
<br>
<img id="img1" src="1254626562251.jpg" style="zoom:1.0">
</body>

<script language="javascript">
function zoomOut(){
var zoom = parseFloat(document.getElementById("img1").style.zoom);
zoom = zoom + 0.1;
document.getElementById("img1").style.zoom = zoom;
asd.value=zoom;
}
function zoomIn(){
var zoom = parseFloat(document.getElementById("img1").style.zoom);
zoom = zoom - 0.1;
document.getElementById("img1").style.zoom = zoom;
asd.value=zoom;
}
</script>
</html>

本例能实现单击+按钮放大图片，单击-按钮缩小图片。

需要注意的是，在应用中，需要缩放的东东必须加上style="zoom:1.0"，这里的1.0可以换成其他数字，默认缩放比例。