取得滑鼠座標和根據滑鼠位置顯示內容的實例
取得滑鼠座標，並且依照滑鼠所在div彈出不同內容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><head><title>鼠标的距离</title><script type="text/javascript">var mouseX;var mouseY;function show(event) { var infoDiv = document.getElementById('infoDiv');
mouseOver(event);
document.getElementById("a").innerHTML = mouseX+" "+mouseY ;
infoDiv.style.display = "block"; //infoDiv.innerHTML = mouseX+" "+mouseY; infoDiv.style.left = mouseX + 10 + "px";
infoDiv.style.top = mouseY + 10 + "px";
}function hide() {var infoDiv = document.getElementById('infoDiv').style.display = "none";;
}function mouseOver(obj) {
e = obj || window.event;// 此处记录鼠标停留在组建上的时候的位置, 可以自己通过加减常量来控制离鼠标的距离. mouseX = e.layerX|| e.offsetX;
mouseY = e.layerY|| e.offsetY; if(e.target.id == "aaa")
{
infoDiv.innerHTML = "aaa";
}else if(e.target.id == "bbb")
{
infoDiv.innerHTML = "bbb";
}else if(e.target.id == "ccc")
{
infoDiv.innerHTML = "ccc";
}else if(e.target.id == "ddd")
{
infoDiv.innerHTML = "ddd";
}else{
infoDiv.innerHTML = "eee";
}
}</script></head><body><div onmousemove="show(event);" onmouseout="hide();" style="margin:150px ; background:#ff0; height:300px; width:300px; position:relative; ">鼠标相对于触发事件元素的位置<strong id="a"></strong><div id="aaa">aaa</div><div id="bbb">bbb</div><div id="ccc">ccc</div><div id="ddd">ddd</div>
<div id="infoDiv" style="display: none; position: absolute; width: 100px; height: 100px; background-color: #F1F19B;"></div></div></body></html>
以上是取得滑鼠座標和根據滑鼠位置顯示內容的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
Win11怎麼停用工作列縮圖預覽? 關閉滑鼠移動工作列圖示顯示縮圖技巧
Feb 29, 2024 pm 03:20 PM
本文將介紹如何在Win11系統中關閉滑鼠移動工作列圖示時顯示的縮圖功能。這項功能在預設情況下是開啟的，當使用者將滑鼠指標懸停在工作列上的應用程式圖示上時，會顯示該應用程式的目前視窗縮圖。然而，有些用戶可能覺得這個功能不太實用或會幹擾到他們的使用體驗，因此想要關閉它。工作列縮圖可能很有趣，但它們也可能分散注意力或煩人。考慮到您將滑鼠懸停在該區域的頻率，您可能無意中關閉了重要視窗幾次。另一個缺點是它使用更多的系統資源，因此，如果您一直在尋找一種提高資源效率的方法，我們將向您展示如何停用它。不過
惠普推出 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個月。本站附滑鼠參數資訊如下：
雷蛇 | 寶可夢耿鬼款無線滑鼠、滑鼠墊上架，套裝價 1549 元
Jul 19, 2024 am 04:17 AM
本站7月12日消息，雷蛇今日宣布推出雷蛇|寶可夢耿鬼款無線滑鼠、滑鼠墊。其單品定價分別為1,299元及299元，包含兩款產品的套裝價則為1,549元。這並非雷蛇首次推出耿鬼聯名的周邊產品，2023年雷蛇就推出過耿鬼款的八岐大蛇V2遊戲滑鼠。這次推出兩款新品整體均採用與鬼斯、鬼斯通、耿鬼家族外觀類似的深紫色底色，印有這三隻寶可夢和精靈球的線條輪廓，中間則為耿鬼這一經典幽靈屬性寶可夢的彩色大圖。本站發現，雷蛇|寶可夢耿鬼款無線滑鼠是基於先前發表的毒蝰V3專業版打造。其整體重量為55g，搭載雷蛇第二代FOC
雷蛇滑鼠驅動在哪個資料夾
Mar 02, 2024 pm 01:28 PM
很多使用者不知道自己雷蛇驅動安裝的檔案去了哪裡，這些驅動檔案一般都是安裝在了系統盤，也就是電腦的C盤，具體位置在programfiles下的RAZE資料夾。雷蛇滑鼠驅動在哪個資料夾答：在系統C碟的programfiles下的RAZE資料夾。一般驅動都會安裝在C盤，按照位置去找就可以了。雷蛇滑鼠驅動安裝方法介紹1.下載好官網的檔案以後雙擊運行自己下載的EXE檔。 2、等待軟體載入。 3.在這裡可以選擇你要安裝的哪個驅動程式。 4.選擇好以後點選右下角的「安裝」就可以了。
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無線滑鼠該滑鼠
Microsoft Word無法使用滑鼠選擇或突出顯示文本
Feb 20, 2024 am 09:54 AM
這篇文章探討了MicrosoftWord中滑鼠無法選擇或突出顯示文字時可能出現的問題，以及如何解決這些問題。為什麼我無法在MicrosoftWord中選擇文字？在MSWord中無法選擇文字可能受多種原因影響，例如權限限制、文件受保護、滑鼠驅動問題或文件損壞。以下將提供解決這些問題的方法。修復MicrosoftWord無法使用滑鼠選擇或突出顯示文本如果MicrosoftWord無法使用滑鼠選擇或突出顯示文本，請遵循下面提到的解決方案：確保您的滑鼠左鍵正在工作檢查您是否有資格更改該文件更新滑鼠的驅動
谷歌安全碼在哪裡獲取
Mar 30, 2024 am 11:11 AM
谷歌驗證器是一種用於保護使用者帳戶安全的工具，其金鑰是用於產生動態驗證碼的重要資訊。如果忘記了谷歌驗證器的金鑰，只能透過安全碼進行驗證，那麼下文站小編就會為大家帶來谷歌安全碼在哪裡取得的詳細內容介紹，希望能幫助到大家，想要了解的用戶們就請跟著下文繼閱讀吧！首先開啟手機設置，進入設定頁面。下拉頁面，找到Google。進入Google頁面，點選Google帳號。進入帳號頁面，點選驗證碼下方的檢視。輸入密碼或使用指紋驗證身分。取得Google安全碼，利用安全碼驗證Google身分。
多彩推出 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傘繩線，並內建接收器收納倉。本站總結此滑鼠具體參數如下：顏色：黑、白、紅傳
