Make an image follow mouse pointer

Question

I need a rocket to follow the movements of the mouse pointer on my website  This means it should rotate to face the direction of motion  and if possible  accelerate depending on the distance it has to cover  Is this even possible   jquery perhaps

User · Accepted Answer

by using jquery to register  mousemove to document to change the image  css left and top to event pageX and event pageY  example as below http   jsfiddle net BfLAh 1   x000D   x000D    document  mousemove function e          follow   css       left  e pageX      top  e pageY           x000D   follow     position  absolute    text-align  center    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt div id  follow  gt  lt img src  https   placekitten com 96 140    gt  lt br gt Kitteh lt  br gt   lt  div gt  x000D   x000D   x000D   updated to follow slowly http   jsfiddle net BfLAh 3  for the orientation   you need to get the current css left and css top and compare with event pageX and event pageY   then set the image orientation with -webkit-transform  rotate -90deg    -moz-transform  rotate -90deg     for the speed   you can set the jquery  animation duration to certain amount

User · Answer

Here s my code  not optimized but a full working example     lt head gt   lt style gt   divtoshow  position absolute display none color white background-color black   onme  width 150px height 80px background-color yellow cursor pointer   lt  style gt   lt script type  text javascript  gt  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   lt  script gt   lt  head gt   lt body gt   lt div id  divtoshow  gt test lt  div gt   lt br gt  lt br gt   lt div id  onme  onMouseover  document getElementById divName  style display  block   onMouseout  document getElementById divName  style display  none   gt Mouse over this lt  div gt   lt  body gt

User · Answer

Ok  here s a simple box that follows the cursor Doing the rest is a simple case of remembering the last cursor position and applying a formula to get the box to move other than exactly where the cursor is  A timeout would also be handy if the box has a limited acceleration and must catch up to the cursor after it stops moving  Replacing the box with an image is simple CSS  which can replace most of the setup code for the box   I think the actual thinking code in the example is about 8 lines  Select the right image  use a sprite  to orientate the rocket  Yeah  annoying as hell   -   x000D   x000D  function getMouseCoords e      var e   e    window event    document getElementById  container   innerHTML   e clientX              e clientY     lt br gt     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    x000D   container     width  1000px    height  1000px    border  1px solid blue    x000D   lt div id  container  gt  lt  div gt  x000D   x000D   x000D

[javascript] Make an image follow mouse pointer

Examples related to javascript

Examples related to jquery