计算增量以将div带到屏幕中心并调整大小

Question

我有一种情况需要输出一些代码，同时将div从0缩放到它的“最终”尺寸，同时从屏幕顶部向下移动。

x和y的最终尺寸可能每次都不同，但我的代码会知道它们（div将包含用户提供的图像，因此我只能读取图像尺寸）。

现在，我可以执行代码来“缩放”div并将其向下移动到屏幕上。我知道如何找到浏览器窗口的y中心等...

我通过在topMargin中添加“yvalue”将其移到屏幕上。

这是我陷入困境的地方，我想这更像是一个数学问题，而不是代码？

问：我如何计算“yvalue”（y位置增量）应该是什么，以便div同时（大致）div到达最大尺寸同时（大致）到达屏幕的中心。此外，我需要找出相应的div_xvalue和div_yvalue应该是什么，以使“缩放”同时发生（如果这是有道理的）

请假设以下变量：

yvalue = increment to add to div topMargin each iteration
zoom_x_final =  final width of div
zoom_y_final =  final height of div
browser_center_y = center position of browser window (y direction)
x = current x size of div
y = current y size of div
div_xvalue = value to add to x for increasing div size per iteration
div_yvalue = value to add to y for increasing div size per iteration
stop_y = center screen position stop for slide down calc'd from    browser_center_y-(zoom_y_final/2)

Answer 1

我认为这可能会对你有帮助。

我试图找到y_increment_per_iteration并得到一个非常简单的答案：

y_increment_per_iteration 
                = [{(browser_width) or (working_area_width)} / 2 ] / zoom_y_final

请注意，此答案可能不正确，因为未经过测试。