通过点击缩放按钮缩小或放大图像（Javascript）

Question

通过点击缩放按钮缩小或放大图像（Javascript）

9

我试图通过两个放大缩小按钮（+）和（-）来放大和缩小图像。问题是，“放大”在图像达到全屏大小（宽度100％）时就停止了。我需要将图像缩放得比屏幕大小更大。只是不知道如何做到这一点。我是Javascript的初学者，希望有人能够帮助我解决这个小问题。

我想知道是否有任何简单的放大/缩小/重置插件可以与放大缩小按钮一起使用？获取图像也会很酷。

再次感谢！

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>

" />

- Dr.Feelgood

尝试移除.main img { max-width: 100%; }。 - 3rdthemagical

@Dr.Feelgood请确保标记答案。我已经发布了您需要的所有更改的答案。 - user7207170

3个回答

3

你的缩放方法很好，只需删除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>

另外，我建议使用magic zoom作为缩放库。

- Renzo Calla

0

从 .main img 的 CSS 中移除 max-width: 100%;

- user9051387

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user7207170 · Accepted Answer

如前面的回答所述，您的代码非常好，但是有一个例外，即您使用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。