Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich einen kreisförmigen anklickbaren Bereich auf der Seite implementieren?

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

PHP中文网
PHP中文网Original
2017-06-21 14:33:572385Durchsuche

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;

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

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

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

  16. 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(

      "内")

      }
    3. else{
    4. console.log(
    5. "外")
    6. }
    7. }

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn