通过单击缩放按钮（Javascript）来放大和缩小图像
[英]Zooming in & out an image by clicking zoom buttons (Javascript)
问题描述
我正在尝试通过两个缩放按钮（+）和（-）放大和缩小图像。 问题是，当图像为全屏尺寸（宽度100％）时，“放大”将停止。 我需要将图像缩放到比屏幕尺寸大得多。 只是想不出该怎么做。 我是Java语言的初学者，所以我希望有人有动力来帮助我解决这个小问题。
我想知道是否有任何与缩放按钮一起使用的简单的放大/缩小/重置插件？ 图像抓取也将很酷。
再次感谢！
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>
“ />
3 个解决方案
解决方案1
5
正如前面的回答所述，您的代码除之外绝对没问题，您已将图片的最大宽度限制为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>
编辑：
- 由于您希望初始宽度为100％（完整大小），而不是最大宽度，因此只需像上一次编辑中那样将宽度设置为100％。
- 为了实现拖动功能以滚动图像，已在
main容器中添加了另一个CSS类，称为dragscroll，并根据需要导入了其js。
解决方案2
0 2017-12-04 14:18:37
移除最大宽度：100％； 来自.main img css
解决方案3
0 2017-12-04 14:20:37
您的缩放方法效果很好，只需删除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>
另一方面，我建议魔术缩放作为缩放库
通过Uranium.io的缩放交互，“放大/缩小”按钮查找要放大/缩小的图像需要什么？
[英]With Uranium.io's zoom interaction, what is required for the zoom in/out buttons to find the image to zoom in/out from?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.