还是精确度问题

我的目标点是（300,300）最后却没在这里消失，我的newDiv宽高明明是（300,180），怎么用IE8自带的JS调试工具发现变成了（298,178）？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <style type="text/css">#btnDiv{
position: absolute;
top: 400px;
left: 600px;
}#main{
position: absolute;
top: 100px;
left: 600px;
}
</style><script type="text/javascript">function small(){
//隐藏当前层
var objDiv = document.getElementById("main");
//objDiv.style.display = "none";
//创建特效层
var newDiv = document.createElement("div");
newDiv.setAttribute("id","newDIV");
//newDiv.innerHTML = "abc";
newDiv.style.position = "absolute";
newDiv.style.top = "100px";
newDiv.style.left = "600px";
newDiv.style.width = "300px";
newDiv.style.height = "180px";
newDiv.style.border = "1px dashed black";
newDiv.style.overflow = "hidden";
document.body.appendChild(newDiv);
//目标位置
var purposeX = 300;
var purposeY = 300;

//移动方向，该加还是该减
var centerPointX = parseInt(newDiv.style.left) + (parseInt(newDiv.style.width)) / 2;
var moveForwardX = (centerPointX > purposeX) ? '-' : '+';

var centerPointY = parseInt(newDiv.style.top) + (parseInt(newDiv.style.height)) / 2;
var moveForwardY = (centerPointY > purposeY) ? '-' : '+';

//alert(moveForwardX + "\t" + moveForwardY);

//var distance = Math.sqrt(Math.pow((Math.abs(centerPointX - purposeX)),2) + Math.pow((Math.abs(centerPointY - purposeY)),2));
//alert(distance); //两点距离

//特效缩小
effectSmall(purposeX,purposeY,moveForwardX,moveForwardY);
}/*
 * 缩小效果，newDiv宽width每次减小6px
 */
function effectSmall(purposeX,purposeY,moveForwardX,moveForwardY){
var newDiv = document.getElementById("newDIV");

//中心点坐标
var centerPointX = parseInt(newDiv.style.left) + (parseInt(newDiv.style.width)) / 2;
var centerPointY = parseInt(newDiv.style.top) + (parseInt(newDiv.style.height)) / 2;

//两点横、纵坐标绝对值
var distanceX = Math.abs(centerPointX - purposeX);
var distanceY = Math.abs(centerPointY - purposeY);

/* 高度的增量 */
var calcHeight = (parseInt(newDiv.style.height) * 6) / parseInt(newDiv.style.width);
var vCalcHeight = Math.round(calcHeight);
vCalcHeight = (vCalcHeight < 1) ? 1 : vCalcHeight;

/* 中心点 距离 目标点 的横坐标增量 */
var calcDistanceX = (parseInt(distanceX) * 6) / parseInt(newDiv.style.width);
var vCalcDistanceX = Math.round(calcDistanceX);
vCalcDistanceX = (vCalcDistanceX < 1) ? 1 : vCalcDistanceX;

/* 中心点 距离 目标点 的纵坐标增量 */
var calcDistanceY = (parseInt(distanceY) * vCalcHeight) / parseInt(newDiv.style.height);
var vCalcDistanceY = Math.round(calcDistanceY);
vCalcDistanceY = (vCalcDistanceY < 1) ? 1 : vCalcDistanceY;


if(parseInt(newDiv.style.width) > 0){
if(parseInt(newDiv.style.width) >= 6){
newDiv.style.width = (parseInt(newDiv.style.width) - 6) + 'px';
newDiv.style.left = eval((parseInt(newDiv.style.left) + moveForwardX + vCalcDistanceX)) + 'px';
}else{
newDiv.style.width = 0 + 'px';
}

if(parseInt(newDiv.style.height) >= calcHeight){
newDiv.style.height = (parseInt(newDiv.style.height) - vCalcHeight) + 'px';
newDiv.style.top = eval((parseInt(newDiv.style.top) + moveForwardY + vCalcDistanceY)) + 'px';
}else{
newDiv.style.height = 0 + 'px';
}

timer = setTimeout("effectSmall(" + purposeX + "," + purposeY + ",'" + moveForwardX + "','" + moveForwardY + "')",10);
}else{
newDiv.style.display = "none";
}
if(parseInt(newDiv.style.width) < 30){
alert(centerPointX + "\t" + centerPointY);
}
}function big(){

clearTimeout(timer);

var objDiv = document.getElementById("main");
objDiv.style.display = "block";

var newDiv = document.getElementById("newDIV");
document.body.removeChild(newDiv);

}function testMath(){
//alert(Math.abs(-200)); //绝对值
//alert(Math.pow(450,2)); //平方
//alert(Math.sqrt(214600)); //开平方
//alert(Math.round(0.5)); //最接近的整数

var aaa = "+";
alert(eval(4 + aaa + 5));
}</script>  </head>
  
  <body>
    
<div id="main">
<table border="1px solid #345323" style="width: 300px; height: 180px;">
<tr><td align="center">top: 100px；left: 600px;</td></tr>
<tr><td align="center">222</td></tr>
<tr><td align="center">333</td></tr>
</table>
</div> <div id="btnDiv">
<input type="button" value="缩小" onclick="small()" />
<input type="button" value="放大" onclick="big()" />
<input type="button" value="测试JS的Math方法" onclick="testMath()" />
</div>


  </body>
</html>

解决方案 »

  1.   


    我特效的目的就是有一个效果层newDiv，宽、高不断减小，直到0，同时整个层进行位移，层的中心C点（750,190）最后消失在目标B点（300,300）
    效果层缩小newDiv的宽每次减小6px，常量，写死了的，△w = 6px；
    newDiv的高根据width、height比例缩小，理论上是6 * 180 /300 = 3.6px，△h = 3.6px。但像素不支持小数，所以有人提议，就用的Math.round()方法来实现效果。整个层移动横向位移，其实就是newDiv中心点的左右方向位移，newDiv宽300每次减小6px，直到0，同样的，A、C两点距离450px也不断减小到0，那么这就有个比例，可以计算出450px每次需要减小多少px，（△X = 6 * 450 / 300 = 9px，整数9，巧合！）。但结果大多会出现小数，所以又用Math.round()方法来实现效果。纵向位移，就是newDiv中心点的上下方向位移，同理横向位移，△Y = △h * 110 / 190 = 2.0842...
    出现小数，而HTML不支持小数像素，也用Math.round()方法来实现效果。△h、△X、△Y分别代表变化量，而且我上面计算出他们的值是effectSmall()第一次执行的数据，因为newDiv的宽、高不断减小，会影响到△h、△X、△Y这三个值也跟着不断减小。
    我上面整个代码执行出来，alert清楚地看到中心点最后没有消失在B（300,300），请大虾看看，是什么原因？我目前怀疑是Math.round()造成的，但又不知道用什么可以取代，望指教！
      

  2.   

    图片没显示好，重贴一张另外，我调试发现浏览器解析的宽、高没问题，是300、180
    alert(newDiv.offsetWidth + "\t" + newDiv.clientWidth + "\t" + newDiv.style.width);只是FF下offsetWidth、clientWidth跟IE不一样，正好，我现在用的newDiv.style.width，两者效果一样