怎么能在页面上实现一个圆形可点击区域？

1.   map+area

DW软件实现方法    视频：

2.  border-radius（H5）

1. <style>  

2.  .circle{  

3. /*圆设置*/

4.      width:100px;  

5.      height:100px;   

6.      border-radius: 50%;  

7.      cursor: pointer; 

8.  /*文字设置*/

9.      position: absolute;  

10.      left:50px;  

11.      top:50px;    

12.      line-height: 100px;  

13.      text-align: center;  

14.      color: white;  

15.      background-color:dimgray; 

16.  }  

    

    奇域

    奇域是一个专注于中式美学的国风AI绘画创作平台

    30

    查看详情

17. </style> 

3. 纯js实现

求点在不在圆上的简单算法、获取鼠标坐标等等
两点之间的距离计算公式

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

假设圆心为（100,100）,半径为50，在圆内点击弹出相应的信息，在圆外显示不在圆内的信息

以上就是怎么能在页面上实现一个圆形可点击区域？的详细内容，更多请关注php中文网其它相关文章！