通过单击缩放按钮放大和缩小图像(Javascript)

我正在尝试使图像放大＆amp;通过两个缩放按钮（）＆amp;（ - ）。问题在于，当图像是全屏尺寸（宽度100％）时，"放大"就会停止。我需要缩放图像比屏幕尺寸大得多。只是无法弄清楚如何。我是JavaScript的初学者，所以我希望有人有动力帮助我这个小小的JavaScript问题。

我想知道有没有可与Zoom按钮一起使用的简单缩放/OUT/RESET插件？图像抓取也不是很酷的。

再次感谢！

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>

"/>

，因为上一个答案指出，除了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％，就像上次编辑中的100％一样。
用于实施拖动功能以滚动图像，将另一个CSS类添加到称为DragsCroll的main容器中，并根据需要导入其JS。

您的Zoom方法正常工作，只需删除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>

另一方面，我建议魔术变焦为变焦库

删除最大宽度：100％;来自.main img css

相关内容

最新更新

热门标签：