Web Front End Interview Guide (42): How do I achieve a circular clickable area on a page?

Copyright Statement: This is an original article created by a blogger and may not be reproduced without the permission of the blogger.

Topic Review

This is an open question. Obviously, there is more than one answer. Check your resilience and come up with more solutions to get the interviewer's fancy.Here are three solutions.

Solution

1. map+area

1. <img src="t.jpg" width="1366" height="768" border="0" usemap="#Map" />  
2. <map name="Map" id="Map">  
3.  <area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" />  
4. </map>  

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

Making hot spots with Dreamweaver becomes very easy and will eventually result in the code above, which you can refer to in video at http://www.chuanke.com/3885380-190205.html.

2. border-radius(H5)

1. <style>  
2.  .disc{  
3.      width:100px;  
4.      height:100px;  
5.      background-color:dimgray;  
6.      border-radius: 50%;  
7.      cursor: pointer;  
8.      position: absolute;  
9.      left:50px;  
10.      top:50px;    
11.      line-height: 100px;  
12.      text-align: center;  
13.      color: white;  
14.  }  
15. </style>  
16. <div class="disc">Smart without worry</div>  

<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">Smart without worry</div>

Running effect

 
3. Pure js implementation
Requires a simple algorithm for finding a point on a circle, getting mouse coordinates, etc.
Formula for calculating the distance between two points

For JavaScript The code is as follows:

|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))
Math.abs() for absolute values
Math.pow (base, exponent)
Math.sqrt() for square root
Example:
Assuming the center of the circle is (100,100) and the radius is 50, click inside the circle to pop up the corresponding information, and display the information outside the circle that is not inside the circle.

1. document.onclick=function(e){  
2.     var r=50;//The radius of a circle  
3. var x1=100,y1=100,x2= e.clientX;y2= e.clientY;  
4. //Calculates the distance between the mouse point's position and the center of the circle  
5.     var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));  
6.     if(len<=50){  
7.         console.log("within")  
8.     }else{  
9.         console.log("abroad")  
10.     }  
11.  }  

document.onclick=function(e){
    var r=50;//The radius of a circle
var x1=100,y1=100,x2= e.clientX;y2= e.clientY;
//Calculates the distance between the mouse point's position and the center of the circle
    var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
    if(len<=50){
        console.log("within")
    }else{
        console.log("abroad")
    }
 }

top 1 step on 0