如何控制图像的缩放

how to control scaling of image

本文关键字：图像 缩放 控制 何控制      更新时间：2023-09-26

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

<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;" />

如果你的意思是增加图片尺寸(width &当悬停时，高度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);
  });
});

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

您可以尝试这样组织代码，以便对事件有更多的控制:

<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);
相关文章：