js實(shí)現(xiàn)圓形顯示鼠標(biāo)單擊位置
更新時間:2020年02月11日 10:28:25 作者:da_yu_hai_tang
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圓形顯示鼠標(biāo)單擊位置,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)圓形顯示鼠標(biāo)單擊位置的具體代碼,供大家參考,具體內(nèi)容如下
代碼如下:
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>顯示鼠標(biāo)單擊位置</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'); //需求:鼠標(biāo)在頁面上單擊時,獲取單擊時的位置,并顯示一個小圓點(diǎn) document.onclick = function() { mouse.style.display = 'block'; // 獲取事件對象的兼容處理 var targetX = event.clientX - mouse.offsetWidth / 2; var targetY = event.clientY - mouse.offsetHeight / 2; // 在鼠標(biāo)單擊的位置顯示<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)文章
Three.Js實(shí)現(xiàn)看房自由小項(xiàng)目
目前隨著元宇宙概念的爆火,THREE技術(shù)已經(jīng)深入到了物聯(lián)網(wǎng)、VR、游戲、數(shù)據(jù)可視化等多個平臺,今天我們主要基于THREE實(shí)現(xiàn)一個三維的VR看房小項(xiàng)目,感興趣的朋友跟隨小編一起看看吧2022-10-10多選列表框動態(tài)添加,移動,刪除,全選等操作的簡單實(shí)例
本篇文章主要是對多選列表框動態(tài)添加,移動,刪除,全選等操作的簡單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01JavaScript快速排序(quickSort)算法的實(shí)現(xiàn)方法總結(jié)
快速排序的思想式 分治法,選一個基準(zhǔn)點(diǎn),然后根據(jù)大小進(jìn)行分配,分配然完畢之后,對已經(jīng)分配的進(jìn)行遞歸操作,最終形成快速排序,所以遞歸也是快速排序思想的一個重要組成部分,本文主要給大家介紹了JavaScript實(shí)現(xiàn)快速排序的寫法,需要的朋友可以參考下2023-11-11websocket4.0+typescript 實(shí)現(xiàn)熱更新的方法
這篇文章主要介紹了websocket4.0+typescript 實(shí)現(xiàn)熱更新的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08JavaScript實(shí)現(xiàn)表格表單的隨機(jī)選擇和簡單的隨機(jī)點(diǎn)名
本文主要介紹了JavaScript實(shí)現(xiàn)表格表單的隨機(jī)選擇和簡單的隨機(jī)點(diǎn)名,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08