javascript - zoom an image on button click

I have a code for an image that if you tap on it zooms out and if you tap on any where out side the box of the image it zooms back. is there I can control the zooming with a button such that one button zooms incrementally and the other zooms in decrementally. this is my attempt

<!DOCTYPE html>
<html >
<head> 
  <style type="text/css">
    .zoomin img { height: 200px; width: 200px;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease; }
    .zoomin img:hover { width: 300px; height: 300px; } 
  </style>
</head>
<body>
  <div class="zoomin"> 
     <img src="download.jpg" title="All you need to know about CSS Transitions " /> 
  </div>
</body>
</html> 
<button>plus</button>
<button>minus</button>

<!DOCTYPE html>
<html >
<head> 
  <style type="text/css">
    .zoomin img { height: 200px; width: 200px;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease; }
    .zoomin img:hover { width: 300px; height: 300px; } 
  </style>
</head>
<body>
  <div class="zoomin"> 
     <img src="download.jpg" title="All you need to know about CSS Transitions " /> 
  </div>
</body>
</html> 
<button>plus</button>
<button>minus</button>

what better way could this be achieved

Share Improve this question edited Apr 4, 2017 at 9:06 Mukesh Ram 6,3384 gold badges20 silver badges37 bronze badges asked Apr 4, 2017 at 9:03 parker 2653 gold badges6 silver badges21 bronze badges

It looks like your code works. What are you trying to change? – Nathaniel Flick Commented Apr 4, 2017 at 9:08
I want if I click the plus button let it zoom out and if you click the minus button let it zoom in – parker Commented Apr 4, 2017 at 9:12
do you need like this jsfiddle/ndYdk/7 – Udhay Titus Commented Apr 4, 2017 at 9:26
where did u set the image – parker Commented Apr 4, 2017 at 9:30
Don't use :hover in this case, but rather :focus – roberrrt-s Commented Apr 4, 2017 at 9:34

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

Simply change dimensions of image using .style.[width/height], css will do the rest:

function resize(direction) {
  var delta = 100 * direction;

  var element = document.getElementById('img');
  var positionInfo = element.getBoundingClientRect();

  element.style.width = positionInfo.width+delta+'px';
  element.style.height = positionInfo.height+delta+'px';
}

<!DOCTYPE html>
<html >
<head> 
  <style type="text/css">
    .zoomin img { height: 200px; width: 200px;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease; }
    .zoomin img:hover { width: 300px; height: 300px; } 
  </style>
</head>
<body>
  <div class="zoomin"> 
     <img src="download.jpg" id="img" title="All you need to know about CSS Transitions " /> 
  </div>
</body>
</html> 
<button onClick="resize(1)">plus</button>
<button onClick="resize(-1)">minus</button>

This works, I've given each button a class, one plus and one minus, and have addClass and removeClass. An even easier way would be to have one button and use toggleClass to add and remove the class you already have for zoomin.

$('button.zoomPlus').click(function(){
  $('.zoomin img').addClass('zoomer');
});

$('button.zoomMinus').click(function(){
  $('.zoomin img').removeClass('zoomer');
});

.zoomin img { height: 200px; width: 200px;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease; }
    .zoomin img:hover,
    img.zoomer{ width: 300px; height: 300px; }

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head> 
</head>
<body>
  <div class="zoomin"> 
     <img src="http://placehold.it/300x300" title="All you need to know about CSS Transitions " /> 
  </div>
</body>
</html> 
<button class="zoomPlus">plus</button>
<button class="zoomMinus">minus</button>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - zoom an image on button click - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)