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