矩形等比缩放问题

Question

old
20 * 10new
25 * 12.5newWidth * (newWidth / (oldWidth/oldHeight))

Answer 1

突然想到个有关的问题
如果setInterval()做个大小渐变提示框
从 600/10   经过2000ms   到  1200/20如果宽高同时渐变,怎么保证流畅呢?能实现么?

Answer 2

newWidth:
   newWidth
newHeight:
   newWidth*(oldHeight/oldWidth)js自动取整,从 600/10   经过2000ms   到  1200/20
经过2秒横向跨600像素,纵向跨10像素,人眼是感觉不出棱角的,可以说近似或者就是流畅渐变

Answer 3

TRT:<div id="box" style="width:200px;height:100px;overflow:hidden;background:highlight;color:white;" onmousewheel="Resize(this,event);">200*100</div>
<SCRIPT>
function Resize(obj,e){
e=e||window.event;
var ow = obj.offsetWidth;
var oh = obj.offsetHeight;
var wh = Math.ceil(ow/oh);
nw = (e.wheelDelta>=0 || e.detail<0)?++ow:--ow;
nh = Math.ceil(nw/wh);
obj.style.width = nw;
obj.style.height = nh;
obj.innerHTML = nw+"*"+nh;
return false;
}
</SCRIPT>

Answer 4

兼容FF的
<div id="box" style="width:200px;height:100px;overflow:hidden;background:highlight;color:white;">200*100</div>
<SCRIPT>
function Resize(e){
e=e||window.event;
var obj = document.getElementById("box");
var ow = obj.offsetWidth;
var oh = obj.offsetHeight;
var wh = Math.ceil(ow/oh);
nw = (e.wheelDelta>=0 || e.detail<0)?++ow:--ow;
nh = Math.ceil(nw/wh);
obj.style.width = nw;
obj.style.height = nh;
obj.innerHTML = nw+"*"+nh;
return false;
}
if(document.attachEvent){
document.getElementById("box").attachEvent("onmousewheel",Resize);
}else{
document.getElementById("box").addEventListener("DOMMouseScroll",Resize,false);
}
</SCRIPT>