HTML中设置连接的区域为圆形,三种方式实现圆形可点击区域

1. map和area

将img和map标签连起来的是usemap，它的值是map的id

area属性：shape：表示热点区域的形状，支持rect(矩形)，circle(圆形)，poly(多边形)

coords：表示热点区域的坐标，(0,0)表示图片左上角。rect四个值分别表示左上角坐标和右下角坐标。circle三个值分别表示圆心坐标和半径。poly有若干个值，每两个表示一个坐标点。

href：表示链接到某个地址，和标签差不多

alt：对该区域描述，类似于的alt

2. CSS3的border-radius属性

.content{

width: 100px;

height: 100px;

border-radius: 50%;

border: 1px solid #ccc;}

var content = document.getElementsByClassName("content")[0]

content.addEventListener("click",function(){

alert("aaa")

})

3. js实现

原理：设定一个坐标原点和半径，获取鼠标的x,y轴位置，当鼠标的位置与原点的位置不超过半径时，可点击(参照数学知识)document. = function(e){    let [x,y,r] = [100,100,100] // x,y为坐标原点，r为半径

let x1 = e.clientX; // 获取x坐标

let y1 = e.clientY; // 获取y坐标

let dis = Math.abs(Math.sqrt((Math.pow(x-x1,2)+Math.pow(y-y1,2))))    if(dis

alert("bbb")

}

}Math.abs()：取绝对值

Math.sqrt()：开平方

Math.pow(num,n)：num的n次方

作者：椰果粒

链接：https://www.jianshu.com/p/4904f96b06b3