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.
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
