1

我正在尝试在一段时间内更改 div 的边框宽度并将 div 的位置偏移等量。增量计算为：增量宽度/增量时间（时间在 for 循环中得出）

var widthchange = (width2-width1)/(t2-t1)

这给了我这样的价值（例如）

widthchange = 2.199999999999843

所以如果我增加宽度：

___ .style.borderWidth =(current += widthchange)+"px "+current+"px "+current+"px "+current+"px"

并偏移定位（在这种情况下）

___.style.top =(current -= widthchange)+"px "+current+"px "+current+"px "+current+"px"

随着变化的发生，div 会轻微地前后晃动。

问题是宽度被四舍五入到最近的像素（我相信）而位置不是。我尝试了许多舍入组合，但除非增量是整数，否则宽度调整和偏移量并不完全相等。

有人可以确认四舍五入到最近的像素是宽度发生了什么吗？或者给我任何关于如何使这项工作正常工作的建议？

谢谢

4

1 回答 1

2

你可以通过这样做来解决这个问题：

  1. 计算所需的移动量
  2. 舍入（或截断）为整数值。
  3. 用新的整数移动量计算步数
  4. 计算最后一步需要多少像素才能完全对齐

代码看起来像这样，我想当我甩掉一些未经测试的代码时......

var totalWidth = width2-width1; // must be positive
var count = t2-t1; // must be positive
var widthchange = totalWidth/count; 

var iWidthChange = Math.floor(widthchange);
var pixelsToMove = Math.floor(totalWidth / iWidthchange);
var finalPixelsToMove = totalWidth - (pixelsToMove * count);

for (var i=0 ; i < (t2-t1); ++i) {
    ... move one increment of 'pixelsToMove' ...
}
... move one final increment of 'finalPixelsToMove'
于 2013-05-29T17:50:35.427 回答