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脚本？

类似的东西：

<强> myfile.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);
  });

});

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

Answer 2

您可以尝试以这种方式组织代码，以便更好地控制事件：

<强> HTML

<img src="test.jpg" id="test" alt="Online Test portal" style="position:absolute;top:100.5px;left:300px" title="online test portal" />

<强>的js

function mouseoverHandler(){
    new Effect.Scale('test',150,{scaleX: true, scaleY: true});

    // This will remove the events bindings, if this is what you needed
        this.removeEventListener('mouseover', mouseoverHandler, false);
        this.removeEventListener('mouseout', mouseoutHandler, false);
}

function mouseoutHandler(){
    new Effect.Scale('test', 66.67,{scaleX: true, scaleY: true});
}

document.getElementById('test').addEventListener('mouseover', mouseoverHandler, false);
document.getElementById('test').addEventListener('mouseout', mouseoutHandler, false);

如何控制图像缩放

2 个答案: