Increasing the size of the picture is called zoom in and decreasing the size of the picture is called zoom out effect. It can be done using JQuery. The increasing size of picture on every click we can define and same on decreasing size.
So, see the JQuery code for zoom in and zoom out:-
<script>
$(document).ready(function(){
$("#zoomin").click(function(){
$("img").width($("img").width()+20);//increase width by 20 pixel
$("img").height($("img").height()+20);//increase height by 20 pixel
});
$("#zoomout").click(function(){
$("img").width($("img").width()-20);//decrease width by 20 pixel
$("img").height($("img").height()-20);//decrease height by 20 pixel
});
});
</script>
Complet example :-
<html>
<head>
<title>Zoom in zoom out effect</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<center>
<h3>Zoom in zoom out effect</h3>
<button id="zoomin">Zoom In</button>
<button id="zoomout">Zoom Out</button>
<br><br>
<div><img src="1.jpg" width="150px" height="150px"></div>
</center>
<script>
$(document).ready(function(){
$("#zoomin").click(function(){
$("img").width($("img").width()+20);//increase width by 20 pixel
$("img").height($("img").height()+20);//increase height by 20 pixel
});
$("#zoomout").click(function(){
$("img").width($("img").width()-20);//decrease width by 20 pixel
$("img").height($("img").height()-20);//decrease height by 20 pixel
});
});
</script>
</body>
</html>
No comments:
Post a Comment