首頁 > 開發者 > JavaScript
jQuery實現div跟隨滑鼠移動，jquerydiv跟隨滑鼠
重點是弄清楚如何擷取滑鼠現位置與移動後位置，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>
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
