js實現(xiàn)圓形顯示鼠標單擊位置
更新時間:2020年02月11日 10:28:25 作者:da_yu_hai_tang
這篇文章主要為大家詳細介紹了js實現(xiàn)圓形顯示鼠標單擊位置,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)圓形顯示鼠標單擊位置的具體代碼,供大家參考,具體內(nèi)容如下
代碼如下:
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>顯示鼠標單擊位置</title> <style> .mouse{position:fixed;background:#ffd965;width:40px;height:40px;border-radius:20px;display:none;} </style> <script> window.onload = function(){ var mouse = document.getElementById('mouse'); //需求:鼠標在頁面上單擊時,獲取單擊時的位置,并顯示一個小圓點 document.onclick = function() { mouse.style.display = 'block'; // 獲取事件對象的兼容處理 var targetX = event.clientX - mouse.offsetWidth / 2; var targetY = event.clientY - mouse.offsetHeight / 2; // 在鼠標單擊的位置顯示<div> mouse.style.left = targetX + 'px'; mouse.style.top = targetY + 'px'; }; } </script> </head> <body> <div id="mouse" class="mouse"></div> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
多選列表框動態(tài)添加,移動,刪除,全選等操作的簡單實例
本篇文章主要是對多選列表框動態(tài)添加,移動,刪除,全選等操作的簡單實例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01JavaScript快速排序(quickSort)算法的實現(xiàn)方法總結(jié)
快速排序的思想式 分治法,選一個基準點,然后根據(jù)大小進行分配,分配然完畢之后,對已經(jīng)分配的進行遞歸操作,最終形成快速排序,所以遞歸也是快速排序思想的一個重要組成部分,本文主要給大家介紹了JavaScript實現(xiàn)快速排序的寫法,需要的朋友可以參考下2023-11-11websocket4.0+typescript 實現(xiàn)熱更新的方法
這篇文章主要介紹了websocket4.0+typescript 實現(xiàn)熱更新的方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名
本文主要介紹了JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08