使图像跟随鼠标指针

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

通过使用jquery注册.mousemove文档来将图像.css左侧和顶部更改为event.pageX和event.pageY。

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

更新后慢慢跟进

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

对于方向,你需要保持当前的CSS和css顶部并与event.pageX和event.pageY比较,然后设置图像方向与

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

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

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

  

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

选择正确的图像(使用精灵)来定向火箭。

是的,很烦人的地狱。 🙂

这是我的代码(未优化但是完整的工作示例):

      
test


Mouse over this