放大和放大通过单击缩放按钮（Javascript）显示图像 [英] Zooming in & out an image by clicking zoom buttons (Javascript)
问题描述
我正在尝试放大图像&由两个缩放按钮（+）和（-）。问题是，当图像为全屏尺寸（宽度100％）时，放大将停止。我需要将图像缩放到比屏幕尺寸大得多。只是想不出该怎么做。我是Java语言的初学者，所以我希望有人能帮助我解决这个Java小问题。
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.
我不知道有没有简单的放大/缩小/重置插件可以正常工作有缩放按钮？
I wonder is there any simple zoom in/out/reset plugins that works with zoom buttons? Image grab would be more than cool also.
再次感谢！
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>
/>
推荐答案
如先前的回答所述，您的代码绝对可以，除了，您已经限制了您的图像的最大宽度：100％。如果删除该图像，它将为您提供所需的输出。
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.
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是根据需要导入。
- 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.
这篇关于放大和放大通过单击缩放按钮（Javascript）显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
