javascript - 使用 javascript 更改 borderWidth 并包括位置偏移

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

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

1. 计算所需的移动量
2. 舍入(或 chop )为整数值。
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'