如何在页面上实现一个圆形可点击区域

1.   map+area

DW软件实现方法    视频：http://www.chuanke.com/3885380-190205.html

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.  }  
17. </style> 

3. 纯js实现

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

 

 

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

 

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

1. 1. document.οnclick=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.     }else{  
   9.         console.log("外")  
   10.     }  
   11.  }