Увеличение и уменьшение изображения с помощью кнопок увеличения (Javascript)

Question

Увеличение и уменьшение изображения с помощью кнопок увеличения (Javascript)

1

Я пытаюсь получить изображение, увеличенное с помощью двух кнопок масштабирования (+) & (-). Проблема в том, что "масштабирование" останавливается, когда изображение имеет полный размер экрана (ширина 100%). Мне нужно увеличить изображение намного больше, чем размер экрана. Просто не могу понять, как это сделать. Я начинаю с Javascript, поэтому я надеюсь, что у кого-то есть мотивация, чтобы помочь мне в этой маленькой проблеме Javascript.

Интересно, есть ли какие-либо простые плагины увеличения/уменьшения/сброса, которые работают с кнопками масштабирования? Image grab будет более чем прохладно также.

Еще раз спасибо!

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 04 дек. 2017, в 15:20

Источник

0

Попробуйте удалить .main img { max-width: 100%; }
3rdthemagical 04 дек. 2017, в 14:18
0

@ Dr.Feelgood Обязательно отметьте ответ. Я уже опубликовал ответ со всеми необходимыми изменениями.
user7207170 05 дек. 2017, в 08:47

Теги:

javascript

css

zoom

image-zoom

3 ответа

Ещё вопросы

Попробуйте удалить .main img { max-width: 100%; }
@ Dr.Feelgood Обязательно отметьте ответ. Я уже опубликовал ответ со всеми необходимыми изменениями.

user7207170 · Answer 1 · 2017-12-04T12-04-00.000Z

Как и в предыдущих ответах, ваш код абсолютно прекрасен, за исключением того, что вы ограничили максимальную ширину вашего изображения с 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 контейнер с именем dragscroll был добавлен еще один класс CSS, который при необходимости импортируется js.

Спасибо! Здорово! Но ... Я хочу, чтобы изображение (карта, которую вы видите) заполнило весь экран (максимальная ширина). в начале. (До увеличения) Карта, которую вы видите, на самом деле является изображением, открытым для новой вкладки. На этой странице больше ничего нет - только панель масштабирования и карта, которую вы видите. Возможно ли заставить этот код работать с этим? А как насчет захвата изображения, я имею в виду, что, когда вы увеличили изображение, вы можете переместить изображение, захватив его?
@ Dr.Feelgood Я внес изменения в код, и вы можете увидеть внесенные изменения, как указано в нижней части моего поста. Отметьте это, если это поможет. Приветствия.

Renzo Calla · Answer 2 · 2017-12-04T13-07-00.000Z

Ваш метод масштабирования работает хорошо, просто удалите ширину css max и измените вашу проверку 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>

С другой стороны, я бы рекомендовал магический зум в качестве библиотеки масштабирования

user9051387 · Answer 3 · 2017-12-04T12-01-00.000Z

Удалить максимальную ширину: 100%; от.main img css