javascript - 元件相对于另一个元件的非线性运动

Question

我正在相对于另一个元素移动一个元素。我们称它们为元素 A 和元素 B。

为了问题的简单性，我只保留了 X 轴。

var element_a_container_width = 200;
var element_b_container_width = 700;

// I get position of the mouse,
// it is this position of Element A
// is is: 0 to 200
var mouse_x = e.clientX;

// I calculate relative position (0 to 1),
// (so 0 - is start and 1 is end)
var percentage_x = element_a_container_width / mouse_x;

// I apply position to Element B,
// based on its coordinates (container width)
var element_b_position = percentage_x * element_b_container_width;

一切都很好。但。我需要以非线性方式将位置应用于元素 B，例如：

• 如果鼠标位置为 0-50 - 元素 B 应始终为 0。
• 如果鼠标位置为 150-200 - 元素 B 应始终处于其最大位置 ( element_b_container_width)。
• 如果鼠标位置为 50-150 - 元素 B 应相应移动（从 0 到element_b_container_width）

我可能遗漏了一些明显的东西，但是每次出现问题时，我都不知道该怎么做。

谢谢你的帮助！

标签： javascriptalgorithm

Answer 1

这个怎么样

var percentage_x = (mouse_x - 50)/100;
var element_b_position = 0
if (mouse_x > 150) {
  element_b_position = element_b_container_width
}
if (mouse_x >= 50 && mouse_x <= 150 ) {
  element_b_position = percentage_x * element_b_container_width
}