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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS立即執(zhí)行的匿名函數(shù),結(jié)合實例形式分析了;(function() {})();相關原理、使用技巧及操作注意事項,需要的朋友可以參考下2019-11-11
目前隨著元宇宙概念的爆火，THREE技術已經(jīng)深入到了物聯(lián)網(wǎng)、VR、游戲、數(shù)據(jù)可視化等多個平臺，今天我們主要基于THREE實現(xiàn)一個三維的VR看房小項目，感興趣的朋友跟隨小編一起看看吧2022-10-10
這篇文章主要介紹了javascript抽象工廠模式詳細說明,需要的朋友可以參考下2014-12-12
本文主要對JavaScript中定義對象原型的兩種使用方法進行介紹，具有很好的參考價值，下面就跟小編一起來看下吧2016-12-12
多選列表框動態(tài)添加,移動,刪除,全選等操作的簡單實例
本篇文章主要是對多選列表框動態(tài)添加,移動,刪除,全選等操作的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
下面小編就為大家?guī)硪黄狫avaScript操作選擇對象的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
JavaScript快速排序(quickSort)算法的實現(xiàn)方法總結(jié)
快速排序的思想式 分治法,選一個基準點,然后根據(jù)大小進行分配,分配然完畢之后,對已經(jīng)分配的進行遞歸操作,最終形成快速排序,所以遞歸也是快速排序思想的一個重要組成部分,本文主要給大家介紹了JavaScript實現(xiàn)快速排序的寫法,需要的朋友可以參考下2023-11-11
本文主要介紹了基于canvas的二維碼邀請函生成插件。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
websocket4.0+typescript 實現(xiàn)熱更新的方法
這篇文章主要介紹了websocket4.0+typescript 實現(xiàn)熱更新的方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名
本文主要介紹了JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08