javascript - 使图像跟随鼠标指针

Question

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

Answer 1

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

示例如下 http://jsfiddle.net/BfLAh/1/

$(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 持续时间设置为一定的量。