通过单击缩放按钮（Javascript）放大和缩小图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47635341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zooming in & out an image by clicking zoom buttons (Javascript)
提问by Dr.Feelgood
I'm trying to get an image zoomed in & out by two zoom buttons (+) & (-). The problem is that "zooming in" stops when the image is full screen size (width 100%). I need to zoom the image much bigger than the screen size. Just can't figure it out how to o that. I'm beginner with Javascript so I hope someone have motivation to help me this little Javascript problem.
我正在尝试通过两个缩放按钮 (+) 和 (-) 放大和缩小图像。问题是当图像为全屏尺寸（宽度 100%）时“放大”停止。我需要放大比屏幕尺寸大得多的图像。只是不知道如何做到这一点。我是 Javascript 初学者，所以我希望有人有动力帮助我解决这个 Javascript 小问题。
I wonder is there any simple zoom in/out/reset plugins that works with zoom buttons? Image grab would be more than cool also.
我想知道是否有任何简单的放大/缩小/重置插件可以与缩放按钮一起使用？图像抓取也很酷。
Thanks again!
再次感谢！
function zoomin(){
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if(currWidth == 2500) return false;
else{
myImg.style.width = (currWidth + 100) + "px";
}
}
function zoomout(){
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if(currWidth == 100) return false;
else{
myImg.style.width = (currWidth - 100) + "px";
}
}*body {
margin: 0;
}
#navbar {
overflow: hidden;
background-color: #099;
position: fixed;
top: 0;
width: 100%;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
}
#navbar a {
float: left;
display: block;
color: #666;
text-align: center;
padding-right: 20px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-top: 30px;
}
.main img {
max-width: 100%;
height: auto;
}
.button {
width: 300px;
height: 60px;
}</head>
<body>
<div id="navbar">
<button type="button" onclick="zoomin()"> Zoom In</button>
<button type="button" onclick="zoomout()"> Zoom Out</button>
</div>
<div class="main">
<img id="map" src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" />
</div>" />
" />
回答by Dr.Feelgood
As the previous answers stated your code is absolutely fine with the exception of, you have limited the max-width of your image with max-width: 100%. If you remove that, it will give you the desired output.
正如前面的答案所说，您的代码绝对没问题，除了您使用max-width: 100%. 如果您删除它，它将为您提供所需的输出。
function zoomin() {
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if (currWidth == 2500) return false;
else {
myImg.style.width = (currWidth + 100) + "px";
}
}
function zoomout() {
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if (currWidth == 100) return false;
else {
myImg.style.width = (currWidth - 100) + "px";
}
}*body {
margin: 0;
}
#navbar {
overflow: hidden;
background-color: #099;
position: fixed;
top: 0;
width: 100%;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
}
#navbar a {
float: left;
display: block;
color: #666;
text-align: center;
padding-right: 20px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-top: 30px;
width: 100%;
height: 100vh;
overflow: auto;
cursor: grab;
cursor: -o-grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.main img {
height: auto;
width: 100%;
}
.button {
width: 300px;
height: 60px;
}<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>
<body>
<div id="navbar">
<button type="button" onclick="zoomin()"> Zoom In</button>
<button type="button" onclick="zoomout()"> Zoom Out</button>
</div>
<div class="main dragscroll">
<img id="map" src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" />
</div>Edits:
编辑：
- Since you wanted the initial width to be 100% (full size), instead of max-width, just set width to 100% like done in the last edit.
- For implementing the drag feature to scroll the image, another CSS class has been added to the
maincontainer called dragscroll and it's js is imported as needed.
- 由于您希望初始宽度为 100%（全尺寸），而不是 max-width，只需像上次编辑中所做的那样将宽度设置为 100%。
- 为了实现拖动功能来滚动图像，另一个 CSS 类已添加到
main名为 dragscroll的容器中，并根据需要导入它的 js。
回答by Renzo Calla
Your zoom method is working good just remove the css max width, and change your js validation to allow the image, get bigger.
您的缩放方法运行良好，只需删除 css 最大宽度，并更改您的 js 验证以允许图像变大。
function zoomin(){
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
//if(currWidth == 2500) return false;
// else{
// myImg.style.width = (currWidth + 100) + "px";
//}
myImg.style.width = (currWidth + 100) + "px";
}
function zoomout(){
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if(currWidth == 100) return false;
else{
myImg.style.width = (currWidth - 100) + "px";
}
}*body {
margin: 0;
}
#navbar {
overflow: hidden;
background-color: #099;
position: fixed;
top: 0;
width: 100%;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
}
#navbar a {
float: left;
display: block;
color: #666;
text-align: center;
padding-right: 20px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-top: 30px;
}
.main img {
/* max-width: 100%; */
height: auto;
}
.button {
width: 300px;
height: 60px;
}</head>
<body>
<div id="navbar">
<button type="button" onclick="zoomin()"> Zoom In</button>
<button type="button" onclick="zoomout()"> Zoom Out</button>
</div>
<div class="main">
<img id="map" src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" />
</div>On the other hand I would recommend magic zoomas a zoom library
另一方面，我会推荐魔术缩放作为缩放库
回答by user9051387
Remove max-width: 100%; from .main img css
移除最大宽度：100%；来自 .main img css
