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）

我可能缺少明显的东西，但是每次出现问题时，我都不知道该怎么做。

感谢您的帮助！

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
}

Answer 2

您可以使用“ if（）{}”进行更改。 cpu无法读懂您的想法。

function fMouse (x) {
  if (x > 0 && x < 50) {
    return minvalue;
  } else if (x > 50 && x < 150) {
    return x;
  } else if (x > 150 && x < 200) {
    return maxvalue;
  }
}

简单的算法-您可以更改最小-最大值。

元素相对于另一个元素的非线性运动

2 个答案: