Comment puis-je implémenter une zone cliquable circulaire sur la page ?

1. carte+zone

Méthode de mise en œuvre du logiciel DW Vidéo :

2. 🎜>

<
1. style

   > 🎜>/*Paramètres du cercle*/ largeur : 100px;

2. hauteur:100px;

3. rayon de bordure:

4. curseur; : pointeur;

5. /*Paramètres du texte*/

6. position :

7. gauche; :50px;

8. haut:50px;

9. hauteur de ligne :

10. texte; -aligner : centre ;

11. couleur : blanc ;

12. couleur de fond : gris foncé ; > }

13. style
14. >

15. 3. Implémentation de Pure js

17. Algorithme simple pour savoir si un le point est sur un cercle, obtenir les coordonnées de la souris, etc.Formule de calcul de distance entre deux points|AB|=Math.abs(Math.sqrt(Math. pow(X2-X1),2)+Math.pow(Y2-Y1,2)))

Supposons que le centre du cercle est (100,100) et le rayon est de 50 . En cliquant à l'intérieur du cercle, les informations correspondantes apparaîtront, et à l'extérieur du cercle, les informations qui ne se trouvent pas dans le cercle seront affichées document.onclick=fonction(e){

var r=50;//rayon rond

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

//Calculer le distance entre la position du point de la souris et le centre du cercle

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

2. if(len<=50) {

3. console.log("内")

4. }else{

5. console.log("外")

6. }

}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!