Implementing a mouse follow effect with jQuery

What is mouse tracking, generally speaking, it refers to the phenomenon that when the mouse is moved over an image, the enlarged image of the image will appear, and the enlarged image will move with the mouse over the image.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  *{
   margin:0;
   padding:0;
  }
  img{
   border:none;
  }
  .box{
   width:660px;
   position: relative;
  }
  .box .mark{
   position: absolute;
   width: 400px;
   height: 300px;
   display: none;
  }
  .box .mark img{
   width: 100%;
  }
  .box img{
   width: 150px;
   float: left;
   margin:5px;
  }
 </style>
</head>
<body>
<div class="box" id="box">
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=e95708d565639d99576ae7cb00729334" 
  realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5328802dc943fc046e109f70359add0a" alt=""/>
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=9e5459a7c0098c27adf4bdd73889caa9" 
  realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=846f4d1987765dc4cfd5a06fcdd2dcc1" alt=""/>
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=3cd1c8e301007f0c94850139ac79cb5a" 
  realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=747bf3f7092ebd2b0bf9fcd27e28bbe5" alt=""/>
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=f391169b2cf678aa6fd253cf40d9821d" 
  realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=fec8d2f20fad1f28d540337a831e89d0" alt=""/>
 <div id="mark" class="mark"><img src="" alt=""/></div>
</div>
<script src="http://s0.kuaizhan.com/res/skin/js/lib/jquery-2.0.3.min.js"></script>
<script>
 //1.When the mouse moves over which image, let the corresponding large picture appear;
 //2.When the mouse moves over the img, the large picture follows;
 var $box=$('.box');
 var $aImg=$box.children('img');
 var $mark=$('.mark');
 var $offset=$box.offset();
 $aImg.mouseover(function(){
  //When the mouse moves over each image, make the mark appear, and let the img tag inside the mark have the src attribute value of the current image's realImg attribute;
  $mark.show().find('img').attr('src',$(this).attr('realImg'));
 });
 $aImg.mousemove(function(e){
  //Subtract the x coordinate of the mouse from the left position of $box distance to the body;
  var left= e.clientX-$offset.left+10;
  var top= e.clientY-$offset.top+10;
  $mark.css({left:left,top:top});
 });
 $aImg.mouseout(function(){
  $mark.hide();
 }
</script>
</body>
</html>

That's all for this article. I hope the content of this article can bring some help to everyone's learning or work, and I also hope to support the Yelling Tutorial more!

Statement: The content of this article is from the network, 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 manually edited, and does not assume relevant legal liabilities. If you find any suspected copyright content, please send an email to notice#w3Please send an email to codebox.com (replace # with @ when sending email) to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.

Basic Tutorial