快捷導(dǎo)航

JS+HTML實現(xiàn)的圓形可點擊區(qū)域示例【3種方法】

更新時間：2018年08月01日 09:43:54 作者：筱葭

這篇文章主要介紹了JS+HTML實現(xiàn)的圓形可點擊區(qū)域,結(jié)合實例形式分析了javascript結(jié)合HTML元素屬性實現(xiàn)一個圓形的可點擊區(qū)域相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了JS+HTML實現(xiàn)的圓形可點擊區(qū)域。分享給大家供大家參考，具體如下：

方法一：

<img>通過usemap映射到<map>的circle形<area>。

<img src="images/lanlvseImg.png" usemap="#Map" /> 
<map name="Map" id="Map">
 <area shape="circle" coords="100,100,50"  rel="external nofollow" target="_blank"/>
</map>

方法二：

設(shè)置div的border-radius:50%。

<div id="circle"></div>
#circle{
 background:red;
 width:100px;
 height:100px;
 border-radius:50%;
}

方法三：

JS實現(xiàn)，獲取鼠標(biāo)點擊位置坐標(biāo)，判斷其到圓點的距離是否不大于圓的半徑，來判斷點擊位置是否在圓內(nèi)。

document.onclick = function(e) { 
 var r = 50; 
 var x1 = 100;
 var y1 = 100;
 var x2= e.clientX;
 var y2= e.clientY; 
 var distance = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))); 
 if (distance <= 50)
 alert("Yes!"); 
}

感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運行工具：http://tools.jb51.net/code/WebCodeRun測試一下運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實現(xiàn)方法
json數(shù)據(jù)在ajax實現(xiàn)異步交互時起到了很重要的作用，他可以返回請求的數(shù)據(jù)，然后利用客戶端的js進(jìn)行解析，這一點體現(xiàn)出js的強大，本文介紹JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實現(xiàn)方法，需要了解的朋友可以參考下
2012-12-12
js中判斷用戶輸入的值是否為空的簡單實例
本篇文章主要是對js中判斷用戶輸入的值是否為空的簡單實例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
JavaScript輸入分鐘、秒倒計時技巧總結(jié)（附代碼）
這篇文章主要介紹了JavaScript輸入分鐘、秒倒計時的代碼實現(xiàn)，通過css和js代碼展示了邏輯過程，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。
2017-08-08
Bootstrap Table從服務(wù)器加載數(shù)據(jù)進(jìn)行顯示的實現(xiàn)方法
Bootstrap-Table是一個Boostrap的表格插件，能夠?qū)SON數(shù)據(jù)直接顯示在表格中。接下來通過本文給大家分享Bootstrap Table從服務(wù)器加載數(shù)據(jù)進(jìn)行顯示的實現(xiàn)方法，感興趣的朋友一起看看吧
2016-09-09
CocosCreator入門教程之用TS制作第一個游戲
這篇文章主要介紹了CocosCreator入門教程之用TS制作第一個游戲，對TypeScript感興趣的同學(xué)，一定要看一下
2021-04-04
動態(tài)改變div的z-index屬性的簡單實例
這篇文章介紹了動態(tài)改變div的z-index屬性的簡單實例，有需要的朋友可以參考一下
2013-08-08
es6中reduce的基本使用方法
這篇文章主要給大家介紹了關(guān)于es6中reduce的基本使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用es6具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
V8實現(xiàn)字符串拼接
本文主要介紹了V8實現(xiàn)字符串拼接，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
JavaScript實現(xiàn)九宮格移動拼圖游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)九宮格移動拼圖游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
javascript 實現(xiàn)map集合
本文給大家分享的是個人項目中需要的一個小功能，當(dāng)時經(jīng)過一番度娘才實現(xiàn)，現(xiàn)在從項目中拿出來，分享給大家，需要的小伙伴快來參考下吧。
2015-04-04