Блог

Я перемещаю элемент относительно другого элемента. Давайте назовем их элементом 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 )

Возможно, я упускаю что-то очевидное, но я не могу понять, как это сделать, каждый раз, когда что-то не так.

Спасибо за любую помощь!

Как насчет этого

 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 amp;amp; mouse_x <= 150 ) {
  element_b_position = percentage_x * element_b_container_width
}
  

Вы можете использовать «if(){}», чтобы внести изменения. процессор не может читать ваши мысли.

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

Простой алгоритм — вы можете изменить минимальное-максимальное значение.