js實現(xiàn)圓形顯示鼠標(biāo)單擊位置
更新時間：2020年02月11日 10:28:25 作者：da_yu_hai_tang
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)圓形顯示鼠標(biāo)單擊位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(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)在頁面上單擊時，獲取單擊時的位置，并顯示一個小圓點
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)文章
這篇文章主要介紹了由?JavaScript?的?with?引發(fā)的探索，js?的?with?是為對象訪問提供命名空間式的訪問方式，with?創(chuàng)建一個對象的命名空間，在這個命名空間內(nèi)你可以直接訪問對象的屬性，而不需要通過對象來訪問，下面一起來了解更多詳細(xì)內(nèi)容吧2022-01-01
重寫URL機(jī)制：為了保證一個url的地址唯一，可每次向服務(wù)器傳遞的參數(shù)不一樣即可。此處在實現(xiàn)驗證碼的換一張的功能時，就是利用了改變參數(shù)列表的值進(jìn)行刷新。具體詳細(xì)代碼大家參考下本文2017-08-08
數(shù)組去重，一般需求是給你一個數(shù)組，調(diào)用去重方法，返回數(shù)值副本，副本中沒有重復(fù)元素。下面腳本之家小編給大家?guī)砹薺s數(shù)組去重的多種方法，非常不錯，需要的朋友參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單選項卡制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了 Js與Jq獲取瀏覽器和對象值的方法的相關(guān)資料,需要的朋友可以參考下2016-03-03
微信小程序自定義tabbar custom-tab-bar 6s出不來解決方案(cover-view不兼容)
這篇文章主要介紹了微信小程序自定義tabbar custom-tab-bar 6s出不來解決方案，cover-view不兼容問題,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了小程序mpvue點擊按鈕獲取button值的方法，本文通過兩種方法，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了如何用JS解析剪切板里的excel內(nèi)容，對解析excel感興趣的同學(xué)，可以參考下2021-04-04
這篇文章主要介紹了刪除javascript中注釋語句的正則表達(dá)式,需要的朋友可以參考下2014-06-06
昨天的一篇 圖片的alt屬性 文章評論中的啟發(fā)，特將網(wǎng)頁中的圖片的一些處理方法 小小的總結(jié)一下2009-11-11