Wie kann ich einen kreisförmigen anklickbaren Bereich auf der Seite implementieren?

1. Karte+Bereich

DW-Software-Implementierungsmethode Video:

2. Grenzradius (H5)

1. <Stil> 🎜>/*Kreiseinstellungen*/

2. Breite: 100px;

3. height:100px;

4. border-radius: 50%; : Zeiger;

5. /*Texteinstellungen*/

6. Position: absolut; :50px;

7. top:50px;

line-height: 100px; -align: center;
Farbe: weiß;
Hintergrundfarbe:dimgray; > }
11. Stil
    >

12. 3. Reine js-Implementierung
Einfacher Algorithmus, um herauszufinden, ob a Punkt liegt auf einem Kreis, erhalten Sie Mauskoordinaten usw.
15. Entfernungsberechnungsformel zwischen zwei Punkten

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

17. Angenommen, der Mittelpunkt des Kreises ist (100,100) und der Radius ist 50. Klicken Sie in den Kreis, um die entsprechenden Informationen anzuzeigen. Außerhalb des Kreises werden die Informationen angezeigt, die nicht innerhalb des Kreises liegen document.onclick=

    function(e){

var r=50;//round Radius

var x1=100,y1=100,x2= e.clientX;y2= e.clientY;
//Berechnen Sie den Abstand zwischen der Mauspunktposition und dem Mittelpunkt des Kreises

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

1. if(len<=50) {

2. console.log(

   "内")

   }
else{

3. console.log(
"外")

4. }

5. }

Das obige ist der detaillierte Inhalt vonWie kann ich einen kreisförmigen anklickbaren Bereich auf der Seite implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!