欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實現(xiàn)div跟隨鼠標移動

 更新時間：2020年08月20日 15:15:18   作者：小魚小魚加油吐泡泡  
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)div跟隨鼠標移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

重點是弄清楚如何獲取鼠標現(xiàn)位置與移動后位置，div現(xiàn)在位置與移動后位置：

用jQuery實現(xiàn)div隨鼠標移動而移動，不是鼠標自身的位置?。《莇iv相對于之前位置的移動

代碼如下：（注意看綠色部分的解釋）

<!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){
  //設(shè)置移動后的默認位置
  var endx=0;
  var endy=0;

  //獲取div的初始位置，要注意的是需要轉(zhuǎn)整型，因為獲取到值帶px
  var left= parseInt($(".aa").css("left"));
  var top = parseInt($(".aa").css("top"));

  //獲取鼠標按下時的坐標，區(qū)別于下面的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>

區(qū)別于下面這段代碼：(最終實現(xiàn)效果是div隨鼠標位置移動，具體效果想看的可以粘貼復(fù)制對比看看差距在哪)

 <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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論