Web前端面试指导(四十二)：如何在页面上实现一个圆形的可点击区域？

题目点评

这道题目是比较开放的题目，答案显然是不只一个的，考察你的应变能力，要能拿出多几个解决方案，获取面试官的芳心。以下给大家讲解三种解决方案。

解决方法

1. map+area

<img src="t.jpg" width="1366" height="768"  usemap="#Map" />
<map name="Map" id="Map">
 <area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" rel="external nofollow"  target="_blank" />
</map>
           

使用Dreamweaver制作热点会变得非常的容易，最终会形成上面的代码，具体的操作，可以参考视频，http://www.chuanke.com/3885380-190205.html。

2. border-radius（H5）

<style>
 .disc{
     width:100px;
     height:100px;
     background-color:dimgray;
     border-radius: 50%;
     cursor: pointer;
     position: absolute;
     left:50px;
     top:50px;	
     line-height: 100px;
     text-align: center;
     color: white;
 }
</style>
<div class="disc">智学无忧</div>
           

运行效果

3. 纯js实现 

需要求一个点在不在圆上简单算法、获取鼠标坐标等等

两点之间的距离计算公式  

上面公式对于JavaScript代码如下： 

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

Math.abs()求绝对值

Math.pow(底数,指数)

Math.sqrt()求平方根

示例：

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

document.οnclick=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("外")
    }
 }