怎麼能在頁面上實現一個圓形可點擊區域？

1.   map+area

DW軟體實作方法   影片：

2.  border-radius（H5）

1. #<style>  

2.  .circle{  

3. /*圓形設定*/

4.      width:100px;  

5.     # height:100px

#    # height:100px c 
6. ##   
   ##     border-radius: 50%;  

7.      cursor: pointer; #​​

8. ## /*文字設定*/#*/*文字設定*/

9.      position: absolute;  

10.      left:50px;  

    ## 

11. #     line-height: 100px;  

12.      text-align: center;  #>

    ## 

13. ##     background-color:dimgray; 

14.  }  

15. ##

##

style> 

#3. 純js實作

求點在不在圓上的簡單演算法、取得滑鼠座標等兩點之間的距離計算公式

|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))

 

假設圓心為（100,100）,半徑為50，在圓內點選彈出對應的訊息，在圓外顯示不在圓內的訊息

1. #document.onclick=

   function(e){  

2.     var r=50;#//圓的半徑  

3.     var x1=100,y1=100,x2= e.clientX;y2= e.clientY;  

4. //計算滑鼠點的位置與圓心的距離  

5.     

   var len=Math.abs(Math.sqrt (Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));  

6. ##    if(len<=50) {  

7.         console.log("內")  

8. # #  

9. #        console.log(

   "外")  

10.     }  

11.  }  

#

以上是怎麼能在頁面上實現一個圓形可點擊區域？的詳細內容。更多資訊請關注PHP中文網其他相關文章！