我有一个图像代码，如果你点击它会缩小，如果你点击图像框外的任何地方它会缩小。有没有我可以用一个按钮控制缩放，这样一个按钮递增缩放，另一个递减缩放。这是我的尝试
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.zoomin img { height: 200px; width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease; }
.zoomin img:hover { width: 300px; height: 300px; }
</style>
</head>
<body>
<div class="zoomin">
<img src="download.jpg" title="All you need to know about CSS Transitions " />
</div>
</body>
</html>
<button>plus</button>
<button>minus</button>有什么更好的方法可以实现这一点
最佳答案
只需使用 .style.[width/height] 更改图像尺寸，css 将完成其余工作:
function resize(direction) {
var delta = 100 * direction;
var element = document.getElementById('img');
var positionInfo = element.getBoundingClientRect();
element.style.width = positionInfo.width+delta+'px';
element.style.height = positionInfo.height+delta+'px';
}<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.zoomin img { height: 200px; width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease; }
.zoomin img:hover { width: 300px; height: 300px; }
</style>
</head>
<body>
<div class="zoomin">
<img src="download.jpg" id="img" title="All you need to know about CSS Transitions " />
</div>
</body>
</html>
<button onClick="resize(1)">plus</button>
<button onClick="resize(-1)">minus</button>关于javascript - 单击按钮缩放图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43202705/