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

2019-06-22 12:22:58 阅读：271 来源： 互联网

我正试图让图像放大&通过两个缩放按钮()& ( – ).问题是当图像为全屏尺寸(宽度100％)时,“放大”会停止.我需要缩放比屏幕尺寸大得多的图像.只是无法弄清楚如何做到这一点.我是Javascript的初学者,所以我希望有人有动力帮我解决这个小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>

“/>

解决方法:

正如之前的答案所述,您的代码绝对没有问题,但您的图像最大宽度限制为最大宽度：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％,就像上次编辑中所做的那样.
>为了实现拖动功能以滚动图像,另一个CSS类已被添加到名为dragscroll的主容器中,并且根据需要导入了js.

标签：javascript,css,zoom,image-zoom
来源： https://codeday.me/bug/20190622/1263545.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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