Question

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

Answer 1

使用jquery将.mousemove注册到document以将图像.css左侧和顶部更改为event.pageX和event.pageY。

更新以便慢慢跟进

对于方向，您需要将当前的css保留为css top并与event.pageX和event.pageY进行比较，然后使用

设置图像方向

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

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

Answer 2

好的，这是一个跟在光标后面的简单框：

<script type="text/javascript">

function getMouseCoords(e) {
  var e = e || window.event;
  document.getElementById('msg').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';

  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;
}

</script>

<div id="msg" style="width: 1000px; height: 1000px; border: 1px solid blue;"></div>

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

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

是的，很烦人的地狱。： - ）

Answer 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>

使图像跟随鼠标指针

3 个答案: