Zooming in & out an image by clicking zoom buttons (Javascript)

心不动则不痛 提交于 2019-12-20 14:18:10

问题


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.

Thanks again!

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>

" />


回答1:


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>

Edits:

  • 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 main container called dragscroll and it's js is imported as needed.



回答2:


Remove max-width: 100%; from .main img css




回答3:


Your zoom method is working good just remove the css max width, and change your js validation to allow the image, get bigger.

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>

On the other hand I would recommend magic zoom as a zoom library



来源:https://stackoverflow.com/questions/47635341/zooming-in-out-an-image-by-clicking-zoom-buttons-javascript

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!