主页 / 问题 / 829112
Accepted
Eugen Eray
Asked:2020-05-17 15:48:03 +0000 UTC2020-05-17 15:48:03 +0000 UTC

使用鼠标拖动事件旋转 div

  • 772

大家好！有这样一个“类型”的均衡器旋钮：

.knob {
  width: 70px;
  height: 70px;
  position: relative;
  background-color: yellow;
  border-radius: 50%;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

.knob::after {
  content: "";
  width: 2px;
  height: 48%;
  background-color: black;
  position: absolute;
  margin-left: 50%;
  margin-top: 2%;
}
<div class="knob">
</div>

帮助 JS 执行以下操作：

在事件中，onMouseDrag需要改变旋转角度，div.knob但同时角度不应超过170º和-170º，即没有大于170º和大于-170º的值。

这里有一个例子：

例子

提前致谢！

javascript

1 个回答

  1. Best Answer

    在简化的形式中，这样做是这样的：

    var knob = document.querySelector('.knob'),
  isMouseDown = false,
  mouseDownPositionX;

//выбор центра вращения:
knob.style.transform = 'translate(35,35)';

document.onmousedown = function(e) {
  if (e.target == knob) {
    mouseDownPositionX = e.pageX;
    isMouseDown = true
  }
};

document.onmouseup = function() {
  isMouseDown = false
};

document.onmousemove = function(e) {
  if (isMouseDown) {
    var distanceX = e.pageX - mouseDownPositionX;

    if (distanceX > 170)
      distanceX = 170;

    if (distanceX < -170)
      distanceX = -170;

    knob.style.transform = 'rotate(' + distanceX + 'deg)';
  }
};
    .knob {
  margin-left: 300px;
  /*только для примера. Это надо удалить*/
  width: 70px;
  height: 70px;
  position: relative;
  background-color: yellow;
  border-radius: 50%;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

.knob::after {
  content: "";
  width: 2px;
  height: 48%;
  background-color: black;
  position: absolute;
  margin-left: 50%;
  margin-top: 2%;
}
    <div class="knob"></div>

    您还需要：

    1. 正确的鼠标位置

    2. CSS 旋转参考

    • 4

相关问题