Javascript Zoom In Zoom Out example

Last updated Sep 09, 2021

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">
        
        var width=100;
        var difference=2;
        var interveralID =0;
        

        function zoomIn()
        {
            clearInterval(interveralID);
            interveralID=setInterval(expand,15);
        }
        function zoomOut()
        {
            clearInterval(interveralID);
            interveralID=setInterval(shrink,15);
        }
        function expand()
        {
            if(width<200)
            {
                width = width+difference;
                document.getElementById("zoom_id").style.width=width;
                console.log(width);
            }
            else
            {
                clearInterval(interveralID);
            }
            
        }
        function shrink()
        {
            if(width>100)
            {
                width = width-difference;
                document.getElementById("zoom_id").style.width=width;
                console.log(width);
            }
            else
            {
                clearInterval(interveralID);
            }
            
        }
    
        /script>

 

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.

Javascript Zoom-in/Zoom-out animation

 

Read more Javascript examples

How to get All URL parameters using Javascript

Javascript How to store data in local storage?

How do you parse JSON String in Javascript

How to set Cookie in JavaScript,Create and get Cookie

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

1567 Views