Complete Example of Magnetic Image Following Effect Implemented by jQuery

This example demonstrates the jQuery implementation of the magnetic image follow effect. Shared for everyone's reference, as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Magnet Image</title>
  <style type="text/css">
    #imgSel{position:absolute;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $("function () {
      $("document").mousemove(function (e) {
        $("#imgSel").animate({"left":e.pageX,"top":e.pageY},0.1);
      });
    });
  </script>
</head>
<body>
  <img id="imgSel" src="../images/select.JPG" />
</body>
</html>

Readers who are interested in more content related to jQuery can check the special topics on this site: 'Summary of jQuery Switch Effects and Techniques', 'Summary of jQuery Extension Techniques', 'Summary of jQuery Common Plugins and Usage', 'Summary of jQuery Drag and Drop Effects and Techniques', 'Summary of jQuery Table (table) Operation Techniques', 'Summary of Ajax Usage in jQuery', 'Summary of jQuery Classic Effects', 'Summary of jQuery Animation and Effect Usage', and 'Summary of jQuery Selector Usage'.

I hope this article will be helpful to everyone in jQuery programming.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been edited by humans, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.

Basic Tutorial