JavaScript实现鼠标悬停逐渐变大

时间:2024-02-19 11:03:36

JavaScript实现鼠标悬停逐渐变大

效果示例:

鼠标指向图标!!!

注意:还有JS块要放在<img>后面。

以下是代码片段:
<IMG id="IMG1" src="/blog/logo.gif" border="1" width="88" height="33" onMouseOver="timer()" onMouseOut="reset()">
<script language="javascript">
   
  var img_height=200;//此值可该;设定图变到的最大高度
  var img_width=200;//此值可改;设定图变到的最大宽度(与高度img_height相比谁先达到谁的值为准!汗,不会表达!)
  var k=10;        //图一次变大的值,此值越大,图变大的越快
  var timer1=10;  //图多长时间变化一次,值些小,变化越快
  var sh; 
  var oldWidth=parseInt(document.all["IMG1"].width);//读取图像的宽度,并转化为整数型
  var oldHeight=parseInt(document.all["IMG1"].height);//读取图像的宽度,并转化为整数型

 function  timer(){    
  sh=setInterval("image_test()",timer1);
 }
 function image_test(){
  var j=oldWidth/oldHeight;
  document.all["IMG1"].width=document.all["IMG1"].width+j*k ;
  document.all["IMG1"].height=document.all["IMG1"].height+k;
  
  if (document.all["IMG1"].height>=img_height||document.all["IMG1"].width>=img_width){
   clearInterval(sh)
  }
 }
 function reset(){//图像大小初始化
   document.all["IMG1"].width=oldWidth;
   document.all["IMG1"].height=oldHeight;
   clearTimeout(sh);
 }
</script>