◇◆求高手来看一下我做的一个图片放大缩小的程序！！有bug存在！！◇◆

找到错误了:  是你的zoomSmall()中i的问题,导致程序一直执行. 你可以验证一下,大家讨论讨论:
<html>
<head>
</head>
<script language="javascript">
var i;
var w;
var h;
var a;
var yOrn = 0;
var nOry = 0;function c(t)
{
i=1;
w = t.width;
h = t.height;
if(document.all.ck.value=="0")
{
alert("fangda");
a = setInterval("zoomBig()",50);
document.all.ck.value="1";
alert(i)
}
else
{
    alert(i)
setInterval("zoomSmall()",50);
document.all.ck.value="0";
}
}function zoomBig(t)
{   
    
document.all.pic.width = w*(100+i)/100;
document.all.pic.height = h*(100+i)/100;
i+=4;
if(document.all.pic.width > window.screen.width)
    {
  window.clearInterval(a);
  alert(i)
}
}function zoomSmall(t)
{
 
i+=4;
document.all.pic.width = w*(100/(100+i));
document.all.pic.height = h*(100/(100+i));

if(document.all.pic.width < 384)
{
window.clearInterval(a);
alert(i)
document.all.pic.width="384";
document.all.pic.height="288";
//document.all.ck.value="0";
}
}
</script>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><p align="right">
<img border="0" id="pic" src="1.jpg" width="384" height="288" onClick="c(this);"></p>
<input type="hidden" name="ck" value="0">
</body>
</html>

解决方案 »

  1.   

    好啦,楼主看看下面这段代码,在我这没有问题!是按楼上的那位朋友思路改的!
    <html>
    <head>
    </head>
    <script language="javascript">
    var i;
    var w;
    var h;
    var a;
    var yOrn = 0;
    var nOry = 0;function c(t)
    {
    i=1;
    w = t.width;
    h = t.height;
    if(document.all.ck.value=="0")
    {
    a = setInterval("zoomBig()",50);
    document.all.ck.value="1";
    }
    else
    {
        b = setInterval("zoomSmall()",50);
    document.all.ck.value="0";
    }
    }function zoomBig(t)
    {   
        
    document.all.pic.width = w*(100+i)/100;
    document.all.pic.height = h*(100+i)/100;
    i+=4;
    if(document.all.pic.width > window.screen.width)
        {
      window.clearInterval(a);
    }
    }function zoomSmall(t)
    {
     
    i+=4;
    if(i<113 && i>1)
    {
    document.all.pic.width = w*(100/(100+i));
    document.all.pic.height = h*(100/(100+i));
    if(document.all.pic.width < 384)
    {
    window.clearInterval(a);
    document.all.pic.width="384";
    document.all.pic.height="288";
    //document.all.ck.value="0";
    }
    }
    else
    {
      window.clearInterval(b);
    }
    }
    </script>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><p align="right">
    <img border="0" id="pic" src="1.jpg" width="384" height="288" onClick="c(this);"></p>
    <input type="hidden" name="ck" value="0">
    </body>
    </html>
      

  2.   

    不好意思, 我又看了看,好像和i没关系:
    function c(t)
    {
    i=1;
    w = t.width;
    h = t.height;
    if(document.all.ck.value=="" || document.all.ck.value=="0")
    {
    alert("fangda");
    a = setInterval("zoomBig()",50);
    document.all.ck.value="1";
    }else{
    setInterval("zoomSmall()",50);//改成b=setInterval("zoomSmall()",50)
    document.all.ck.value="0";
    }
    }function zoomSmall(t)
    {
     
    i+=4;
    document.all.pic.width = w*(100/(100+i));
    document.all.pic.height = h*(100/(100+i));

    if(document.all.pic.width < 384)
    {
    window.clearInterval(a);//改成window.clearInterval(b)
    alert(i)
    document.all.pic.width="384";
    document.all.pic.height="288";
    //document.all.ck.value="0";
    }
    }
    楼主试试.
      

  3.   

    我认为原因是没有清除setInterval("zoomSmall()",50). 以至于没50毫秒执行一次zoomSmall函数, 所以i不断增加. 并且当document.all.pic.width < 384时, 不仅alert(i), 而且图片大小还瞬间恢复到384,288. 随着i的增加图片越来越小.楼主还有一个bug:
    当图片还没有放至最大时你点击图片看看效果.以上是小弟片面理解.多指教.
      

  4.   

    把 setInterval("zoomSmall()",50);改为
       a=setInterval("zoomSmall()",50);
      

  5.   

    <html>
    <head>
    </head>
    <script language="javascript">
    var i;
    var w;
    var h;
    var a;
    var b;
    var yOrn = 0;
    var nOry = 0;
    var ick=0;
    var initimgW;//原始图片宽
    var initimgH;//原始图片高
    function c(t)
    {
    i=1;
    w = t.width;
    h = t.height;
    if(ick==0)
    {
                    initimgW = t.width;
                    initimgH = t.height;
    a = setInterval("zoomBig()",50);
            ick=1;
    }
    else
    {
            b = setInterval("zoomSmall()",50);
    ick=0;
    }
    }function zoomBig(t)
    {   
        
    document.all.pic.width = w*(100+i)/100;
    document.all.pic.height = h*(100+i)/100;
    i+=4;
    if(document.all.pic.width > window.screen.width)
            {
      window.clearInterval(a);
    }
    }function zoomSmall(t)
    {
          
    i+=4;
    if(i<113 && i>1)
    {
    document.all.pic.width = w*(100/(100+i));
    document.all.pic.height = h*(100/(100+i));
    if(document.all.pic.width < 384)
    {
      window.clearInterval(a);
      document.all.pic.width=initimgW ; //设置宽
      document.all.pic.height=initimgH ;//设置高
    }
    }
    else
    {
       window.clearInterval(b);
    }
    }
    </script>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><p align="right">
    <img border="0" id="pic" src="1.jpg" width="384" height="288" onClick="c(this);"></p>
    </body>
    </html>改了一点儿,效果不是更好吗??这样就比较动态了
      

  6.   

    <html>
    <head>
    </head>
    <script language="javascript">
    var i;
    var w;
    var h;
    var a;
    var yOrn = 0;
    var nOry = 0;function c(t)
    {
    i=1;
    w = t.width;
    h = t.height;
    if(document.all.ck.value=="0")
    {
    a = setInterval("zoomBig()",50);
    document.all.ck.value="1";
    }
    else
    {
        b = setInterval("zoomSmall()",50);
    document.all.ck.value="0";
    }
    }function zoomBig(t)
    {   
        
    document.all.pic.width = w*(100+i)/100;
    document.all.pic.height = h*(100+i)/100;
    i+=4;
    if(document.all.pic.width > window.screen.width)
        {
      window.clearInterval(a);
    }
    }function zoomSmall(t)
    {
     
    i+=4;
    if(i<113 && i>1)
    {
    document.all.pic.width = w*(100/(100+i));
    document.all.pic.height = h*(100/(100+i));
    if(document.all.pic.width < 384)
    {
    window.clearInterval(a);
    document.all.pic.width="384";
    document.all.pic.height="288";
    //document.all.ck.value="0";
    }
    }
    else
    {
      window.clearInterval(b);
    }
    }
    </script>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><p align="right">
    <img border="0" id="pic" src="1.jpg" width="384" height="288" onClick="c(this);"></p>
    <input type="hidden" name="ck" value="0">
    </body>
    </html>
      

  7.   

    那是因为你没有清除setInterval呀, 
    当你缩到最小或最大时应该清除用clearInterval()清空timer呀,
    要不你也可以用setTimeout()来递归执行呀....