jQuery實(shí)現(xiàn)div跟隨鼠標(biāo)移動(dòng)

更新時(shí)間：2020年08月20日 15:15:18 作者：小魚(yú)小魚(yú)加油吐泡泡

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)div跟隨鼠標(biāo)移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

重點(diǎn)是弄清楚如何獲取鼠標(biāo)現(xiàn)位置與移動(dòng)后位置，div現(xiàn)在位置與移動(dòng)后位置：

用jQuery實(shí)現(xiàn)div隨鼠標(biāo)移動(dòng)而移動(dòng)，不是鼠標(biāo)自身的位置！！而是div相對(duì)于之前位置的移動(dòng)

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

<!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è)置移動(dòng)后的默認(rèn)位置
  var endx=0;
  var endy=0;

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

  //獲取鼠標(biāo)按下時(shí)的坐標(biāo)，區(qū)別于下面的es.pageX,es.pageY
  var downx=e.pageX;
  var downy=e.pageY;  //pageY的y要大寫(xiě)，必須大寫(xiě)?。?

  // 鼠標(biāo)按下時(shí)給div掛事件
 $(".aa").bind("mousemove",function(es){

  //es.pageX,es.pageY:獲取鼠標(biāo)移動(dòng)后的坐標(biāo)
  var endx= es.pageX-downx+left;  //計(jì)算div的最終位置
  var endy=es.pageY-downy+top;

  //帶上單位
  $(".aa").css("left",endx+"px").css("top",endy+"px") 
 }); 
 })
 

 $(".aa").mouseup(function(){
  //鼠標(biāo)彈起時(shí)給div取消事件
  $(".aa").unbind("mousemove")
 })
 
</script>

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

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

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

您可能感興趣的文章:

相關(guān)文章

基于Jquery的簡(jiǎn)單&簡(jiǎn)陋Tabs插件代碼
一個(gè)基于Jquery的簡(jiǎn)單&簡(jiǎn)陋Tabs插件，學(xué)習(xí)的朋友可以參考下。
2010-02-02
jquery實(shí)現(xiàn)input框獲取焦點(diǎn)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)input框獲取焦點(diǎn)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01
jQuery中:checked選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:checked選擇器用法,實(shí)例分析了:checked選擇器的功能、定義及選取選中的復(fù)選框或單選按鈕時(shí)的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊處心形漂浮的炫酷效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊處心形漂浮的炫酷效果,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下
2018-04-04
jQuery 使用手冊(cè)(七)
jQuery 使用手冊(cè)，大家可以耐心的看完，就基本上入門了。
2009-09-09
使用jquery局部刷新(jquery.load)從數(shù)據(jù)庫(kù)取出數(shù)據(jù)
jquery提供了很好的ajax交互，我這里用的是直接返回字符串，用的是jquery.load方法從數(shù)據(jù)庫(kù)取出的數(shù)據(jù)
2014-01-01
jquery 跨域訪問(wèn)問(wèn)題解決方法(筆記)
對(duì)于js跨域訪問(wèn)，在先前也曾碰到過(guò)，但可能并沒(méi)有認(rèn)真去對(duì)待，可能查看過(guò)相關(guān)資料，但當(dāng)著兩天再次碰到這個(gè)問(wèn)題時(shí)，走了不少?gòu)澛凡耪业絾?wèn)題原因。記下這次解決過(guò)程，為自己不再?gòu)?qiáng)大的記憶力默哀一下。
2011-06-06
在網(wǎng)站上應(yīng)該用的30個(gè)jQuery插件整理
jQuery插件是網(wǎng)頁(yè)設(shè)計(jì)師最喜歡的。從圖像滑塊，圖像畫(huà)廊和導(dǎo)航插件，它們是如此眾多，如此多樣，如此驚人的和互動(dòng)可以制作美化網(wǎng)站
2011-11-11
jQuery EasyUI編輯DataGrid用combobox實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)
本文給大家分享jQuery EasyUI編輯DataGrid用combobox實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)效果的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-08-08
基于jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片橫向滾動(dòng)
點(diǎn)擊左右按鈕圖片橫向滾動(dòng)jquery，一次滾動(dòng)四個(gè)，圖片滾動(dòng)完成，自動(dòng)回到第一個(gè)版面，效果相當(dāng)不錯(cuò)，感興趣的前端工程師們可以參考下
2013-04-04