Zoom In and Zoom Out Function
Steps:
<html>
<head>
<title> scaling</title>
<script type="text/javascript">
var width=100;
var difference=2;
var interveralID =0;
//document.getElementById("img1").style.width=width;
function increase()
{
clearInterval(interveralID);
interveralID=setInterval(expand,10);
function expand()
{
if(width<200)
{
width = width+difference;
document.getElementById("img1").style.width=width;
console.log(width);
}
else
{
clearInterval(interveralID);
}
}
}
function decrease()
{
clearInterval(interveralID);
interveralID=setInterval(shrink,10);
function shrink()
{
if(width>100)
{
width = width-difference;
document.getElementById("img1").style.width=width;
console.log(width);
}
else
{
clearInterval(interveralID);
}
}
}
</script>
</head>
<body>
<br>
<img onmouseover="increase()" onmouseout="decrease()"
id="img1" src="E:\1nodejs\images\f4.jpg" width="100"/>
</body>
</html>
0 Comments