コードがランダム

-1

<img id="myImg" src="http://shushi168.com/data/out/193/37281782-random-image.png" onmouseover="zoomIn()" onmouseout="zoomOut()"> 


function zoomIn(){ 
     alert("test"); 
    var element = document.getElementById("myImg"); 
    var newWidth = 450; 
    var newHeight = 200; 
    if((element.width != newWidth) && (element.height != newHeight)){ 
     var zoomStart = function(){ 
      element.width += 1.5; 
      element.height += 1; 
      if((element.height < newHeight) && (element.width < newWidth)){ 
       setTimeout(zoomStart, 10); 
      }  
     } 
     zoomStart(); 
    } 
    } 



function zoomOut(){ 
     var element = document.getElementById("myImg"); 
     alert("begin2 " + element.width +" "+ element.height); 
     var originalWidth = 300; 
     var originalHeight = 100; 
     if((element.width != originalWidth) && (element.height != originalHeight)){ 
      var zoomStart = function(){ 
       element.width -= 1.5; 
       element.height -= 1; 
       if((element.height > originalHeight) && (element.width > originalWidth)){ 
        setTimeout(zoomStart, 10); 
       }  
      } 
      zoomStart(); 
     } 
    }

https://jsfiddle.net/j3dgrzaz/1/コードがランダム

を動作を停止し、私のコードのための上記のjsフィドルを参照してください。

マウスの上を移動すると画像が拡大され、マウスが離れると再び小さくなります。

コードはうまくいきました。私はcssを別のファイルに移動し、コードはすべて突然動作しなくなりました...

出典

2016-12-01 LikeToLearnStuff

HTMLファイルにCSSファイルが含まれていますか？ –

これは実際にはランダムではなく、刺激に直接反応します。言ってるだけ'。 – Paul

あなたはあなたのエラーを見ることができます - 'zoomIn（）'と 'zoomOut（）'は未定義です。 – Craicerjack

ページをロードする前に、javascript関数を定義する必要があります。だから頭にシフトし、それは正常に動作します。

https://jsfiddle.net/j3dgrzaz/7/

<head> 

<script> 
function zoomIn(){ 
     alert("test"); 
    var element = document.getElementById("myImg"); 
    var newWidth = 450; 
    var newHeight = 200; 
    if((element.width != newWidth) && (element.height != newHeight)){ 
     var zoomStart = function(){ 
      element.width += 1.5; 
      element.height += 1; 
      if((element.height < newHeight) && (element.width < newWidth)){ 
       setTimeout(zoomStart, 10); 
      }  
     } 
     zoomStart(); 
    } 
    } 

    function zoomOut(){ 
     var element = document.getElementById("myImg"); 
     alert("begin2 " + element.width +" "+ element.height); 
     var originalWidth = 300; 
     var originalHeight = 100; 
     if((element.width != originalWidth) && (element.height != originalHeight)){ 
      var zoomStart = function(){ 
       element.width -= 1.5; 
       element.height -= 1; 
       if((element.height > originalHeight) && (element.width > originalWidth)){ 
        setTimeout(zoomStart, 10); 
       }  
      } 
      zoomStart(); 
     } 
    } 

</script> 


</head>

出典

2016-12-01 11:30:24 mrid

または単に 'window.zoomIn = zoomIn;を追加してください。 window.zoomOut = zoomOut; 'jsの最後にhtmlにコードを移動して公開します。 – Strille

うん、それもうまくいくよ！ – mrid

@Strille jsコードはいずれの方法でも公開されています。この回答は、機能が見つからないという問題を解決しましたが、フィドルは意図したことをしていないようです（つまり、ズームインもズームアウトも起こっていない）。 –

答えて

関連する問題