DHTML Image Zoom Out-优快云博客

本文链接：https://blog.youkuaiyun.com/xuehouniao/article/details/288156

DHTML Image Zoom Out

View Live Demo

In this Script when you move you click on the following image, the image size will decrease gradually (i.e the image will zoom out) and will finally disappear.
The script is very easy to customise. Here the event that calls the function is onclick. You can change it to onmouseover, onmouseout or onmousedown.

Select All Code

<script language="javascript">

// (c) 2002 Premshree Pillai
// http://www.qiksearch.com
// premshree@hotmail.com
// Loaction of this script :
// http://www.qiksearch.com/javascripts/image_zoom_out.htm
// Visit http://www.qiksearch.com/javascripts.htm for more FREE scripts

document.write('<div id="izo_div" style="position:absolute; top:130; left:190"><img src="izo.gif" border="3" bordercolor="#000000" name="izo" alt="Image Zoom Out" onclick="javascript:setTimeout("zoom_out()",1000);" style="cursor:hand"></div>');

img_act_width = izo.width;
img_act_height = izo.height;

i=1;

function zoom_out()
{
 if(izo.width==0)
  {
   izo.border=0;
  }
 if(izo.width!=0)
  {
   izo.width-=i;
   izo.height=Math.round(izo.width*((img_act_height)/(img_act_width)));
   setTimeout("zoom_out()",1);
   i+=1;
  }  
} 

</script>