快捷導(dǎo)航

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

更新時間：2020年08月20日 15:15:18 作者：小魚小魚加油吐泡泡

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

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

用jQuery實現(xiàn)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){
  //設(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)文章

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