Javascript Zoom In Zoom Out example
In this Javascript example tutorial we will cover basic Zoom in - Zoom out animation with java script. we applied this zoom animation on image by changing the width attribute values.
In this we used setInterval() method to call zoom-in/zoom-out functions. This setInterval method calls a function at specified intervals which we provided time in milliseconds.
This setInterval method calls until we need to call clearInterval() method
Lets' get started about Javascript Zoom functionality
Step 1: Create an Html file by adding the Image inside div.
Step 2: Set id to the image as "zoom_id"
div style=" text-align: center; border: 1px solid rgba(0, 0, 0, 0.8);min-height:500px;"> id="zoom_id" src="images/heart.jpg" width="100" style="margin-top:200px;"/> /div> |
In the above on image onmouseover and onmouseout attribute we called javascript functions to make image zoom-in and zoom-out functionality. So let's add javascript functions
Step 3:
script type="text/javascript"> function zoomIn() |
Step 4: let's open file in your browser and move mouse on image, you will able to see zoom-in/zoom-out animation of the Image.
![]() |
Read more Javascript examples
How to get All URL parameters using Javascript
Javascript How to store data in local storage?