Make an image follow mouse pointer

by

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/

$(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>

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.

More Related Contents:

  1. Replacing live with on function [closed]
  2. How do I pass a URL as a parameter? [closed]
  3. How to add a dynamic query string to a link?
  4. How to Get Response From rest URL using jquery
  5. .index() only for one instance of class [closed]
  6. What is the best way to add options to a select from a JavaScript object with jQuery?
  7. toggle show/hide div with button?
  8. Replace multiple strings at once
  9. jQuery selector for id starts with specific text [duplicate]
  10. How to filter JSON Data in JavaScript or jQuery?
  11. How can I determine if an image has loaded, using Javascript/jQuery?
  12. Call javascript function after script is loaded
  13. Dynamically loading css stylesheet doesn’t work on IE
  14. Merge Two Arrays so that the Values Alternate
  15. How can I detect whether an iframe is loaded?
  16. Content Security Policy: The page’s settings blocked the loading of a resource
  17. Prevent Cheating on Javascript Game
  18. offsetTop vs. jQuery.offset().top
  19. Nested iframes, AKA Iframe Inception
  20. Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x – y), where y is unknown
  21. Cancel event on input type=”file”
  22. TypeError: $(…).modal is not a function with bootstrap Modal
  23. Javascript – Stop form submit depending on ajax response [duplicate]
  24. Prevent Highlight of Text Table
  25. Regex in JavaScript for validating decimal numbers
  26. Call function with setInterval in jQuery?
  27. Alternative to eval() javascript [duplicate]
  28. Downloading file from ajax result using blob
  29. Google’s Places API and JQuery request – Origin http://localhost is not allowed by Access-Control-Allow-Origin
  30. Create a table in SVG

Leave a Comment