DHTML Image Zoom Out

最新推荐文章于 2016-06-03 10:27:08 发布

xuehouniao

最新推荐文章于 2016-06-03 10:27:08 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： DHTML 文章标签： image javascript function border div c

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

DHTML 专栏收录该内容

10 篇文章

订阅专栏

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>