使图像跟随鼠标指针答案

【问题标题】：Make an image follow mouse pointer使图像跟随鼠标指针
【发布时间】：2011-08-22 06:22:46
【问题描述】：

我需要一个火箭来跟踪我网站上鼠标指针的移动。这意味着它应该旋转以面向运动方向，并且如果可能的话，根据它必须覆盖的距离加速。这甚至可能吗？ jQuery 也许？

【问题讨论】：

除非是游戏，否则请不要在网站上使用类似的烦恼。
你不需要 jQuery。您需要获取光标坐标（查看 mousemove 事件）并相应地定位您的图像。至于加速度和方向，可以使用应用于当前光标相对于前一个光标位置的论坛来找到它们。在不支持现代 CSS 属性的浏览器中，方向可能存在问题，您可能需要多个不同方向的图像并使用最接近的一个。
jQuery 确实使代码更好。
@ThiefMaster 是对的。这个问题也类似于：stackoverflow.com/questions/4093359/…
@ThiefMaster 我认为它可能对在线图像编辑应用程序有用（指示当前正在使用的工具与鼠标旁边的小图像），因此它可能不仅仅对游戏有用。

【解决方案1】：

通过使用 jquery 注册 .mousemove 到文档，将图像 .css 左上角更改为 event.pageX 和 event.pageY。

$(document).mousemove(function(e) {
  $("#follow").css({
    left: e.pageX,
    top: e.pageY
  });
});

#follow {
  position: absolute;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="follow"><img src="https://placekitten.com/96/140" /><br>Kitteh</br>
</div>

慢慢更新

http://jsfiddle.net/BfLAh/3/

对于方向，你需要获取当前css left和css top并与event.pageX和event.pageY进行比较，然后设置图像方向

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

对于速度，您可以将 jquery .animation 持续时间设置为一定数量。

【讨论】：

这看起来很完美，你能告诉我如何比较 css top 和 left 与 event.pageX , Y 吗？
这是一个很好的变换例子the-art-of-web.com/css/css-animation
你的意思是比较鼠标和图像的位置？ $('#image').css('top')- event.pageY
在您的小提琴jsfiddle.net/BfLAh/1 上，位置必须是固定的，而不是绝对的。这样，图像将忽略其容器的边距；）
另外，您应该使用 clientX 和 clientY，而不是使用 pageX 和 pageY...否则图像将在向下滚动时以疯狂的方式运行。（看这个stackoverflow.com/questions/6073505/…）

【解决方案2】：

好的，这是一个跟随光标的简单框

剩下的就是记住最后一个光标位置并应用一个公式来让框移动而不是光标所在的位置。如果盒子的加速度有限并且在它停止移动后必须赶上光标，超时也会很方便。用图像替换框是简单的 CSS（可以替换框的大部分设置代码）。我认为示例中的实际思考代码大约是 8 行。

选择正确的图像（使用精灵）来定位火箭。

是的，真烦人。 :-)

function getMouseCoords(e) {
  var e = e || window.event;
  document.getElementById('container').innerHTML = e.clientX + ', ' +
    e.clientY + '<br>' + e.screenX + ', ' + e.screenY;
}


var followCursor = (function() {
  var s = document.createElement('div');
  s.style.position = 'absolute';
  s.style.margin = '0';
  s.style.padding = '5px';
  s.style.border = '1px solid red';
  s.textContent = "?"

  return {
    init: function() {
      document.body.appendChild(s);
    },

    run: function(e) {
      var e = e || window.event;
      s.style.left = (e.clientX - 5) + 'px';
      s.style.top = (e.clientY - 5) + 'px';
      getMouseCoords(e);
    }
  };
}());

window.onload = function() {
  followCursor.init();
  document.body.onmousemove = followCursor.run;
}

#container {
  width: 1000px;
  height: 1000px;
  border: 1px solid blue;
}

&lt;div id="container"&gt;&lt;/div&gt;

【讨论】：

这并不意味着完成代码，只是一个如何开始的简单示例。您还需要处理滚动。

【解决方案3】：

这是我的代码（未优化但完整的工作示例）：

<head>
  <style>
    #divtoshow {position:absolute;display:none;color:white;background-color:black}
    #onme {width:150px;height:80px;background-color:yellow;cursor:pointer}
  </style>
  <script type="text/javascript">
    var divName = 'divtoshow'; // div that is to follow the mouse (must be position:absolute)
    var offX = 15;          // X offset from mouse position
    var offY = 15;          // Y offset from mouse position
    
    function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
    function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
    
    function follow(evt) {
        var obj = document.getElementById(divName).style;
        obj.left = (parseInt(mouseX(evt))+offX) + 'px';
        obj.top = (parseInt(mouseY(evt))+offY) + 'px'; 
        }
    document.onmousemove = follow;
  </script>
</head>
<body>
    <div id="divtoshow">test</div>
    <br><br>
    <div id='onme' onMouseover='document.getElementById(divName).style.display="block"' onMouseout='document.getElementById(divName).style.display="none"'>Mouse over this</div>
</body>

【讨论】：

很好，但与问题中的问题不太一样。
非常感谢，真的很有帮助