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?
var width=100;
var difference=2;
var interveralID =0;
{
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>
|
Article Contributed By :
|
|
|
|
|
524 Views |
|