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