jQuery實作div跟隨滑鼠移動的程式碼案例
前一篇文章中我們詳細的為大家解析了JavaScript中滑鼠跟隨的實作實例，那麼我們今天就跟大家介紹下jQuery實作DIV跟隨滑鼠移動的案例!
重點是弄清楚如何取得滑鼠現位置與移動後位置，p現在位置與移動後位置：
用jQuery實現p隨滑鼠移動而移動，不是滑鼠本身的位置！ ！而是p相對於先前位置的移動
程式碼如下：（注意看綠色部分的解釋）
#更多特效資源，請移步php特效下載頻道 ：滑鼠特效
<!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>
<p class="aa"></p>
</body>
</html>
<script>
$(".aa").mousedown(function(e){
//设置移动后的默认位置
var endx=0;
var endy=0;
//获取p的初始位置，要注意的是需要转整型，因为获取到值带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要大写，必须大写！！
// 鼠标按下时给p挂事件
$(".aa").bind("mousemove",function(es){
//es.pageX,es.pageY:获取鼠标移动后的坐标
var endx= es.pageX-downx+left; //计算p的最终位置
var endy=es.pageY-downy+top;
//带上单位
$(".aa").css("left",endx+"px").css("top",endy+"px")
});
})
$(".aa").mouseup(function(){
//鼠标弹起时给p取消事件
$(".aa").unbind("mousemove")
})
</script>區別於下面這段程式碼：(最終實現效果是p隨滑鼠位置移動，具體效果想看的可以貼上複製對比看看差距在哪)
<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>總結：
本文使用範例程式碼為大家介紹了jQuery實作DIV跟隨滑鼠移動的案例，相信小夥伴也已經對此有一定的了解，希望對你的工作有幫助~
相關推薦：
以上是jQuery實作div跟隨滑鼠移動的程式碼案例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Win11怎麼停用工作列縮圖預覽? 關閉滑鼠移動工作列圖示顯示縮圖技巧
Feb 29, 2024 pm 03:20 PM
本文將介紹如何在Win11系統中關閉滑鼠移動工作列圖示時顯示的縮圖功能。這項功能在預設情況下是開啟的，當使用者將滑鼠指標懸停在工作列上的應用程式圖示上時，會顯示該應用程式的目前視窗縮圖。然而，有些用戶可能覺得這個功能不太實用或會幹擾到他們的使用體驗，因此想要關閉它。工作列縮圖可能很有趣，但它們也可能分散注意力或煩人。考慮到您將滑鼠懸停在該區域的頻率，您可能無意中關閉了重要視窗幾次。另一個缺點是它使用更多的系統資源，因此，如果您一直在尋找一種提高資源效率的方法，我們將向您展示如何停用它。不過
雷蛇 | 寶可夢耿鬼款無線滑鼠、滑鼠墊上架，套裝價 1549 元
Jul 19, 2024 am 04:17 AM
本站7月12日消息，雷蛇今日宣布推出雷蛇|寶可夢耿鬼款無線滑鼠、滑鼠墊。其單品定價分別為1,299元及299元，包含兩款產品的套裝價則為1,549元。這並非雷蛇首次推出耿鬼聯名的周邊產品，2023年雷蛇就推出過耿鬼款的八岐大蛇V2遊戲滑鼠。這次推出兩款新品整體均採用與鬼斯、鬼斯通、耿鬼家族外觀類似的深紫色底色，印有這三隻寶可夢和精靈球的線條輪廓，中間則為耿鬼這一經典幽靈屬性寶可夢的彩色大圖。本站發現，雷蛇|寶可夢耿鬼款無線滑鼠是基於先前發表的毒蝰V3專業版打造。其整體重量為55g，搭載雷蛇第二代FOC
惠普推出 Professor 1 三模輕音滑鼠：4000DPI、藍影 RAW3220，首發價 99 元
Apr 01, 2024 am 09:11 AM
本站3月31日消息，惠普近日在京東上架了一款Professor1三模藍牙滑鼠，可選用黑白奶茶色，首發價99元，需支付10元訂金。據介紹，這款滑鼠重量為106克，採用人體工學設計，尺寸為127.02x79.59x51.15mm，可選七檔4000DPI，搭載藍影RAW3220傳感器，使用650毫安時電池，號稱一次充電續航可以使用2個月。本站附滑鼠參數資訊如下：
VGN 聯名《艾爾登法環》鍵鼠系列產品上架：菈妮 / 褪色者定制主題，首發 99 元起
Aug 12, 2024 pm 10:45 PM
本站8月12日消息，VGN於8月6日推出了聯名《艾爾登法環》鍵鼠系列產品，包含鍵盤、滑鼠和滑鼠墊，採用菈妮/褪色者客製化主題設計，目前系列產品已上架京東，售價99元起。本站附聯名新品資訊如下：VGN丨艾爾登法環S99PRO鍵盤此鍵盤採用純鋁合金外殼，輔以五層消音結構，使用GASKET板簧結構，擁有單鍵開槽PCB、原廠高度PBT材質鍵帽、鋁合金個人化背板；支援三模連接和SMARTSPEEDX低延遲技術；接入VHUB，可一站式管理多款設備，首發549元。 VGN丨艾爾登法環F1PROMAX無線滑鼠該滑鼠
雷蛇滑鼠驅動在哪個資料夾
Mar 02, 2024 pm 01:28 PM
很多使用者不知道自己雷蛇驅動安裝的檔案去了哪裡，這些驅動檔案一般都是安裝在了系統盤，也就是電腦的C盤，具體位置在programfiles下的RAZE資料夾。雷蛇滑鼠驅動在哪個資料夾答：在系統C碟的programfiles下的RAZE資料夾。一般驅動都會安裝在C盤，按照位置去找就可以了。雷蛇滑鼠驅動安裝方法介紹1.下載好官網的檔案以後雙擊運行自己下載的EXE檔。 2、等待軟體載入。 3.在這裡可以選擇你要安裝的哪個驅動程式。 4.選擇好以後點選右下角的「安裝」就可以了。
6000 毫安矽負極電池！小米 15Pro 升級再曝料
Jul 24, 2024 pm 12:45 PM
7月23日消息，部落客數位閒聊站爆料稱，小米15Pro電池容量增大至6000mAh，支援90W有線閃充，這將是小米數位系列電池最大的Pro機型。先前數位閒聊站透露，小米15Pro的電池擁有超高能量密度，矽含量遠高於競品。矽基電池在2023年大規模試水後，第二代矽負極電池被認定為產業未來發展方向，今年將迎來直接競爭的高峰。 1.矽的理論克容量可達4200mAh/g，是石墨克容量的10倍以上（石墨的理論克容量372mAh/g）。對於負極而言，當鋰離子嵌入量達到最大時的容量為理論克容量，這意味著在相同重量下
多彩推出 M900 Pro 無線遊戲滑鼠：右手人體工學造型，8K Nano 接收器，199 元起
Mar 23, 2024 pm 05:16 PM
本站3月22日消息，Delux多彩推出M900Pro無線遊戲滑鼠，使用右手人體工學造型，首發預售價199元起。多彩M900Pro使用右手人體工學設計，為中大手用戶打造，重63g，並噴有霧面UV塗層。滑鼠使用PAW3395感應器，原廠Nano接收器支援8000Hz無線報酬率，搭載環諾藍殼粉點微動並標配RGB充電底座與防滑貼。此外，滑鼠還支援調節LOD、全鍵自訂、自訂波紋控制與直線修正等功能，配備PTFE腳墊，1.6m傘繩線，並內建接收器收納倉。本站總結此滑鼠具體參數如下：顏色：黑、白、紅傳
滑鼠配重塊如何安裝
Mar 01, 2024 am 09:20 AM
我們在為了增加自己的手感還有穩定性購買了滑鼠配重之後我們該如何安裝呢，有些小夥伴也不知道該如何操作，今天就來教大家如何安裝這個滑鼠配重塊。滑鼠配重塊如何安裝：1.滑鼠的底下就是吸鐵石，我們往下掰開。 2.接著我們將配重盒用鑷子挑開。 3、然後我們把配重塊放到滑鼠底下。 4.最後我們的滑鼠就增加了穩定性。
