Question

我正在尝试在一段时间内更改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会轻微地来回摇动。

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

有人可以确认圆角到最近的像素是宽度发生的吗？或者就如何正常工作给我任何建议？

由于

Answer 1

您可以通过以下方式解决此问题：

计算所需的移动量
将（或截断）舍入为整数值。
计算新整数移动量的步数
计算完成最后一步所需的像素数

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

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'

使用javascript更改borderWidth并包含位置偏移量

1 个答案: