重點是弄清楚如何獲取鼠標現位置與移動后位置，div現在位置與移動后位置：
用jQuery實現div隨鼠標移動而移動，不是鼠標自身的位置！！而是div相對于之前位置的移動
代碼如下：（注意看綠色部分的解釋）
<!DOCTYPE html><html> <head> <meta charset="{utf-8}"> <title></title> <script src="../jquery-3.2.0.js"></script> <style> .aa{ height: 100px; width: 200px; position: absolute; background-color: green; } </style> </head> <body> <div class="aa"></div> </body></html><script> $(".aa").mousedown(function(e){ //設置移動后的默認位置 var endx=0; var endy=0; //獲取div的初始位置，要注意的是需要轉整型，因為獲取到值帶px var left= parseInt($(".aa").css("left")); var top = parseInt($(".aa").css("top")); //獲取鼠標按下時的坐標，區別于下面的es.pageX,es.pageY var downx=e.pageX; var downy=e.pageY; //pageY的y要大寫，必須大寫！！ // 鼠標按下時給div掛事件 $(".aa").bind("mousemove",function(es){ //es.pageX,es.pageY:獲取鼠標移動后的坐標 var endx= es.pageX-downx+left; //計算div的最終位置 var endy=es.pageY-downy+top; //帶上單位 $(".aa").css("left",endx+"px").css("top",endy+"px") }); }) $(".aa").mouseup(function(){ //鼠標彈起時給div取消事件 $(".aa").unbind("mousemove") }) </script>區別于下面這段代碼：(最終實現效果是div隨鼠標位置移動，具體效果想看的可以粘貼復制對比看看差距在哪)
<script>$(".aa").mousedown(function(e){ $(document).bind("mousemove",function(e){ $(".aa").css("left",e.pageX).css("top",e.pageY) });}) $(".aa").mouseup(function(){ $(document).unbind("mousemove") }) </script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
