主页 / 问题 / 1233491
Accepted
Мне без сахара
Asked:2022-01-19 21:05:52 +0800 CST2022-01-19 21:05:52 +0800 CST

如何用鼠标移动物体

  • 772

有没有div办法用鼠标移动它？我的意思是像老鼠一样移动，在我的手臂下，我不知道如何解释，我的意思是drag一旦没有，drag但如何hover

javascript

2 个回答

  1. Best Answer

    const cursor = document.querySelector('.cursor');

document.addEventListener( 'mousemove', e => {
  cursor.style.left = e.clientX + 'px';
  cursor.style.top = e.clientY + 'px';
});
    .cursor {
  width: 30px;
  height: 30px;
  transform: translate(-50%,-50%);
  position: absolute;
  background-color: red;
}
    <div class="cursor"></div>

    • 5

  2. jQuery 版本。

    此选项的优点是，如果光标离开可见部分，则元素连同光标一起离开屏幕。

    $(document).mousemove(
  function(position) {
    $("#cursor").show();
    $("#cursor").css('left', (position.pageX - 10) + 'px').css('top', (position.pageY - 10) + 'px');
  }
).mouseleave(function() {
  $("#cursor").hide();
});
    body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#cursor {
  position: absolute;
  z-index: 999;
  top: -20px;
  left: -20px;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 100%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cursor"></div>

    • 2

相关问题