图片跟随鼠标移动

关键点：

1.图片采用绝对定位

2.事件：mousemove

3.偏移距离 offset(), .offset().left | .offset().top

$("#mem-box-mouse").css({
    "left": pointX - $memBox.offset().left - 50,//图片跟随鼠标移动，判断图片在背景区域内的位置 鼠标位置-背景框相对于页面的距离：mouseX - offset().left，
    "top": pointY - $memBox.offset().top - 60//offset().top，顶部偏移距离
});

 1     <script>
 2 
 3     $(document).ready(function () {
 4 
 5         //-----------mouse move
 6         var the_small_mouse_h_half = 60;//取鼠标图片高度一半
 7         var the_small_mouse_w_half = 50;//取鼠标图片宽度一半
 8         var $memBox = $("#mem-box-bg");//取鼠标活动的背景框

 9         var mem_box_top = $memBox.offset().top + the_small_mouse_h_half;//上
10         var mem_box_left = $memBox.offset().left + the_small_mouse_w_half;//左
11         var mem_box_bottom = $memBox.offset().top + $memBox.height() - the_small_mouse_h_half;//下
12         var mem_box_right = $memBox.offset().left + $memBox.width() - the_small_mouse_w_half;//右


13         $("body").mousemove(function (e) {
14             var pointX = e.pageX;//这里可以得到鼠标X轴坐标
15             var pointY = e.pageY;//这里可以得到鼠标Y轴坐标
16            //鼠标活动上下左右活动范围
17             if (pointX > mem_box_left && pointX < mem_box_right && pointY > mem_box_top && pointY < mem_box_bottom) {
18                 $("#mem-box-mouse").css({
19                     "width": "100px",
20                     "left": pointX - $memBox.offset().left - 50,//mouse - offsetWidth，鼠标图片跟随鼠标移动，判断鼠标图片在背景区域内的位置
21                     "top": pointY - $memBox.offset().top - 60//offset().top，顶部偏移距离
22                 });
23             }
24         });
25     });
26 </script>

图片跟随鼠标移动

推荐阅读