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

2020-07-28 00:03:49
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("外")

}

}