使div容器左上角跟随鼠标位置移动

你可以使用JavaScript获取鼠标的坐标，然后将它们应用到CSS中，以使div容器跟随鼠标移动。以下是一个简单的示例：

HTML代码：

<div id="container">这是一个div容器</div>

CSS代码：

#container {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript代码：

var container = document.getElementById('container');

document.addEventListener('mousemove', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  container.style.top = y + 'px';
  container.style.left = x + 'px';
});

这段JavaScript代码将监听整个文档的mousemove事件，并获取鼠标的坐标。然后，它将这些坐标应用到div容器的CSS样式中，使它跟随鼠标移动。请注意，div容器必须被设置为position: absolute或position: fixed才能正确移动。

相关问题

使div容器跟随鼠标位置移动

可以使用JavaScript来实现这个功能。以下是一个简单的例子：

HTML代码：

<div id="container">这是一个要跟随鼠标移动的容器</div>

CSS代码：

#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
  font-size: 16px;
}

JavaScript代码：

var container = document.getElementById('container');

document.addEventListener('mousemove', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  
  container.style.top = y + 'px';
  container.style.left = x + 'px';
});

解释一下代码：

首先，我们获取到要跟随鼠标移动的容器，并为它添加了一个事件监听器，监听鼠标移动事件。在事件处理函数中，我们获取到了鼠标的坐标（即e.clientX和e.clientY），然后将容器的top和left属性设置为这些坐标值。这样就实现了鼠标移动时容器跟随移动的效果。

注意：这个例子中只是给出了一个基本的思路，具体的实现方式还需要根据自己的需求进行调整。

html 跟随鼠标光标移动的div

要实现跟随鼠标光标移动的 div，可以使用 CSS 和 JavaScript 来完成。

首先，我们需要将 div 的位置设置为绝对定位，并且将其 z-index 属性设置为更高的值，以确保它始终处于页面上方。

然后，我们可以使用 JavaScript 的 mousemove 事件来获取鼠标的坐标，并将 div 的位置设置为鼠标的坐标。

具体实现代码如下：

HTML 代码：

<div id="followDiv">跟随鼠标光标移动的 div</div>

CSS 代码：

#followDiv {
  position: absolute;
  z-index: 9999;
}

JavaScript 代码：

var followDiv = document.getElementById('followDiv');

window.addEventListener('mousemove', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  followDiv.style.left = x + 'px';
  followDiv.style.top = y + 'px';
});

这样就可以实现一个跟随鼠标光标移动的 div 了。