gpt4 book ai didi

javascript - 单击按钮缩放图像

转载 作者:太空宇宙 更新时间:2023-11-04 08:54:35 27 4
gpt4 key购买 nike

我有一个图像代码,如果你点击它会缩小,如果你点击图像框外的任何地方它会缩小。有没有我可以用一个按钮控制缩放,这样一个按钮递增缩放,另一个递减缩放。这是我的尝试

<!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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com