圖片跟隨滑鼠移動

標籤：

關鍵點：

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>

 

圖片跟隨滑鼠移動