How can I implement a circular clickable area on the page?

1. map+area

DW software implementation method Video:

2. border-radius (H5)

1. <style>

2. ## .circle{

3. /*Circle Settings*/

## Width:100px;
Height:100px;
border-radius: 50%;
cursor: pointer;
/*Text settings*/
position: absolute;
left:50px;
top:50px;
-Height: 100px;

12. ## Text-Align: Center;

14. background-color:dimgray;

15. }

16. style
17. >

#3. Pure js implementation

Simple algorithm to find whether a point is on a circle, obtain mouse coordinates, etc.

Distance calculation formula between two points

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

Assume that the center of the circle is (100,100) and the radius is 50. Clicking inside the circle will pop up the corresponding information, and outside the circle, the information that is not within the circle will be displayed

document.onclick=

function(e){

1. ##var r=50;//Round Radius

2. ## var x1=100,y1=100,x2= e.clientX;y2= e.clientY;

3. //Calculate the distance between the mouse point position and the center of the circle

4. ##var len=Math.abs(Math.sqrt (Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));

##if(len<=50) {

5. ## console.log(

   "内")

6. ## }else{

7. ##                   console.log("外")                                                                                         down     ’     out out through out out through ’ s ’ through ’ through ’ through ’ through ’ through ‐ off ‐ ‐ ‐ n ‐ ,                           to ## }

The above is the detailed content of How can I implement a circular clickable area on the page?. For more information, please follow other related articles on the PHP Chinese website!