javascript - 如何控制图像的缩放

Question

我使用了缩放属性来缩放我的图像，但它的大小不断增加和减少。我不能控制缩放选项吗？我正在使用此代码。

<img src="test.gif" id="test"alt="Online Test portal" 
    style="position:absolute;top:935.5px;left:300px" 
    title="online test portal" 
    onmouseover= "new Effect.Scale('test', 150,{scaleX: true, scaleY: true}); 
    return false;" onmouseout="new Effect.Scale('test', 66.67,{scaleX: true, 
    scaleY: true}); return false;" />

Answer 1

如果您的意思是在悬停时将图片尺寸(宽度和高度)增加 XX%，然后恢复到正常尺寸，为什么不使用标签中提到的 jQuery 脚本呢？

类似于:

我的文件.htm

<div id="toto">
  <img id="myPic" src="test.gif" id="test" alt="Online Test portal" 
    style="position:absolute;top:935.5px;left:300px" 
    title="online test portal" />
</div>

myscript.js

$(document).ready(function(){
  var picWidth = $("img#myPic").width();  /* retrieve initial width */  
  var picHeight= $("img#myPic").height(); /* retrieve initial height*/
  var picPercen= 1.40 /* if you want to add 40% in both width & height */

  /* function when hovering in */
  $("img#myPic").hover(function(){
    $(this).width(picPercent*picWidth);        
    $(this).height(picPercent*picHeight);
  /* function when hovering out */
  }, function(){
    $(this).width(picWidth);        
    $(this).height(picHeight);
  });

});

或者如果你想让动画避免粗暴的改变:

myscript_AnimateVersion.js

$(document).ready(function(){
  var picWidth = $("img#myPic").width();  /* retrieve initial width */       
  var picHeight= $("img#myPic").height(); /* retrieve initial height*/
  var picPercen= 1.40 /* if you want to add 40% in both width & height */
  var changeTime= 300 /* animation time in milliseconds */

  /* function when hovering in */
  $("img#myPic").hover(function(){
    $(this).animate({width: picPercent*picWidth, height: picPercent*picHeight}, changeTime);
  /* function when hovering out */
  }, function(){
    $(this).animate({width: picWidth, height: picHeight}, changeTime);
  });

});

我还没有测试过这段代码，但它至少给了你提示。