站長資訊網1. map+area
DW軟件實現方法 視頻：
2. border-radius（H5）
-
<style>
-
.circle{
-
/*圓設置*/
-
width:100px;
-
height:100px;
-
border-radius: 50%;
-
cursor: pointer;
-
/*文字設置*/
-
position: absolute;
-
left:50px;
-
top:50px;
-
line-height: 100px;
-
text-align: center;
-
color: white;
-
background-color:dimgray;
-
}
-
</style>
3. 純js實現
求點在不在圓上的簡單算法、獲取鼠標坐標等等
兩點之間的距離計算公式
|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))
假設圓心為（100,100）,半徑為50，在圓內點擊彈出相應的信息，在圓外顯示不在圓內的信息
-
document.onclick=function(e){
-
var r=50;//圓的半徑
-
var x1=100,y1=100,x2= e.clientX;y2= e.clientY;
-
//計算鼠標點的位置與圓心的距離
-
var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
-
if(len<=50){
-
console.log("內")
-
}else{
-
console.log("外")
-
}
-
}
