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

發(fā)布時間：2020-09-12 11:13:45 來源：腳本之家閱讀：298 作者：筱葭欄目：web開發(fā)

本文實例講述了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è)計有所幫助。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽