CSS3 verwendet Transformationsverformung in Kombination mit Ereignissen, um die fächerförmige Navigation zu vervollständigen

Weil ich in diesem Fall das Wort Übergang falsch geschrieben habe, habe ich einen ganzen Nachmittag damit verbracht. Es hat mich wirklich blind gemacht. So einen dummen Fehler werde ich nie wieder machen >_<

1. Wissenspunktanalyse

1. APDiv-Positionierungslayout

2. Die Auswirkungen von Übergang und Transformation bei Klickereignissen.

3. Berechnung der linken und oberen Werte jedes kleinen Symbols.

4. Hören Sie sich nach dem Klicken auf das kleine Symbol das Übergangsereignis des Symbols an.

2. HTML-Quellcode

<div id="Bühne">
  <div id="nav"> 
      <img src="images/1.png"> 
      <img src="bilder/2.png"> 
      <img src="images/3.png"> 
      <img src="images/4.png"> 
      <img src="images/5.png"> 
  </div>
  <div id="home"> <img src="images/home.png"> </div>
</div>

3. CSS-Stil

Körper {
	Rand: 0;
}
Körper{
	Hintergrundfarbe:#eee;}
#Bühne {
	Breite: 300px;
	Höhe: 300px;
	Position: relativ;
	oben: 150px;
	Rand: 0 automatisch;
}
#nav {
	Position: absolut;
	Breite: 120px;
	Höhe: 107px;
	links: 50%;
	Rand links: -60px;
	oben: 50 %;
	Rand oben: -53px;
}
#nav img {
	Breite: 100 %;
	Position: absolut;
	links: 0;
	oben: 0;
	Cursor: Zeiger;
}
#heim {
	Position: absolut;
	Breite: 150px;
	Höhe: 134px;
	links: 0;
	oben: 0;
	rechts: 0;
	unten: 0;
	Rand: automatisch;
	Cursor: Zeiger;
	Übergang: 0,5 s Ein- und Ausstieg;
	
}
#home-Bild {
	Breite: 100 %;
}

4. JavaScript-Quellcode

fenster.onload = funktion(){
	var oHome = document.getElementById("home");
	var oNav = document.getElementById("nav");
	var aImg=oNav.getElementsByTagName("img");
	var imgLen=aImg.length;
	var einAus=true;
	var iR=-260;
	
	//Wenn die Maus auf jedes kleine Symbol klickt for(var i=0;i<imgLen;i++){
		aImg[i].onclick=Funktion(){
			dieser.Stil.Übergang="0,2 s";
			this.style.transform="Skalierung(1,2) Drehung(720 Grad)";
			dieser.Stil.Opazität=0,1;
			addEnd(this,end); //Fügen Sie jedes Mal einen Ereignis-Listener hinzu, wenn auf ein kleines Bild geklickt wird. Wenn das Ereignis endet, wird die Endfunktion ausgeführt.
			}
		}
	//Wenn das Ereignis endet, führen Sie die Endfunktion aus, stellen Sie den Standardwert wieder her und entfernen Sie den Ereignislistener.
	Funktion Ende () {
		dieser.Stil.Übergang="0,1 s";
		this.style.transform="Skalierung(1) Drehung(720 Grad)";
		dieser.Stil.Opazität=1;
		entferneEnde(dies,Ende); 
		}
	
	//Wenn Sie auf das Home-Symbol klicken, dreht es sich beim ersten Mal im Uhrzeigersinn und beim zweiten Mal gegen den Uhrzeigersinn.
	oHome.onclick=Funktion(){
		wenn(anAus)
		{
			this.style.transform="drehen(360 Grad)";
			//Legen Sie die linken und oberen Werte jedes Bildes fest.
			für(var i=0;i<imgLen;i++){
				// hat einen Startwinkel von 30 Grad.
				var oLt=getLeftTop(iR,120/(imgLen-1)*i+30);
				aImg[i].style.left=oLt.l+"px";
				aImg[i].style.top=oLt.t+"px";
				// Jedes Bild hat eine Verzögerung von 100 ms.
				aImg[i].style.transition="0,5 s Ein-Aus-Zeit "+100*i+"ms";
				aImg[i].style.transform="Skalierung(1) Drehung(720 Grad)";
				}
			
			}
		anders
		{
			this.style.transform="drehen(0 Grad)";
			für(var i=0;i<imgLen;i++){
				aImg[i].style.left=0+"px";
				aImg[i].style.top=0+"px";
				//Die Bilder werden in umgekehrter Reihenfolge abgerufen. Jedes Bild hat eine Verzögerung von 100 ms.
				aImg[i].style.transition="0,5 s Ein-Aus-Zeit "+100*(imgLen-i-1)+"ms";
				
				aImg[i].style.transform="Skalierung(1) Drehung(0 Grad)";
				}
			}
		einAus=!einAus;
		
	}
	
}	
	
	
	//Holen Sie sich die linken und oberen Werte des img-Bildes. Satz des Pythagoras: Gegeben sind der eingeschlossene Winkel und die Hypothenuse. Berechnen Sie die Länge der gegenüberliegenden Seite: sin(Radiant)*Hypotenuse. Länge der Seite: cos(Radiant)*Hypotenuse. Bogenmaß = Grad/180*Pi.
	Funktion getLeftTop(iR,iDeg){
		var ileft=Math.round(Math.sin(iDeg/180*Math.PI)*iR);
		var iTop=Math.round(Math.cos(iDeg/180*Math.PI)*iR);
		//Wenn Sie zwei Werte zurückgeben, verwenden Sie die Objektmethode.
		zurückkehren {
			"l":ilinks,
			"t":iOben
			}
		}
	//Endfunktionen hinzufügen und entfernen. Achten Sie auf Übergangsereignisse.
	Funktion addEnd(Objekt,fn){
		obj.addEventListener("Übergangsende",fn,false);
		}
	Funktion removeEnd(obj,fn){
		obj.removeEventListener("Übergangsende",fn,false);
		}

Vollständiger Seitencode

<!doctype html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Zirkularnavigation</title>
<Stil>
Körper {
	Rand: 0;
}
Körper{
	Hintergrundfarbe:#eee;}
#Bühne {
	Breite: 300px;
	Höhe: 300px;
	Position: relativ;
	oben: 150px;
	Rand: 0 automatisch;
}
#nav {
	Position: absolut;
	Breite: 120px;
	Höhe: 107px;
	links: 50%;
	Rand links: -60px;
	oben: 50 %;
	Rand oben: -53px;
}
#nav img {
	Breite: 100 %;
	Position: absolut;
	links: 0;
	oben: 0;
	Cursor: Zeiger;
}
#heim {
	Position: absolut;
	Breite: 150px;
	Höhe: 134px;
	links: 0;
	oben: 0;
	rechts: 0;
	unten: 0;
	Rand: automatisch;
	Cursor: Zeiger;
	Übergang: 0,5 s Ein- und Ausstieg;
	
}
#home-Bild {
	Breite: 100 %;
}
</Stil>
<Skript>
fenster.onload = funktion(){
	var oHome = document.getElementById("home");
	var oNav = document.getElementById("nav");
	var aImg=oNav.getElementsByTagName("img");
	var imgLen=aImg.length;
	var einAus=true;
	var iR=-260;
	
	//Wenn die Maus auf jedes kleine Symbol klickt for(var i=0;i<imgLen;i++){
		aImg[i].onclick=Funktion(){
			dieser.Stil.Übergang="0,2 s";
			this.style.transform="Skalierung(1,2) Drehung(720 Grad)";
			dieser.Stil.Opazität=0,1;
			addEnd(this,end); //Fügen Sie jedes Mal einen Ereignis-Listener hinzu, wenn auf ein kleines Bild geklickt wird. Wenn das Ereignis endet, wird die Endfunktion ausgeführt.
			}
		}
	//Wenn das Ereignis endet, führen Sie die Endfunktion aus, stellen Sie den Standardwert wieder her und entfernen Sie den Ereignislistener.
	Funktion Ende () {
		dieser.Stil.Übergang="0,1 s";
		this.style.transform="Skalierung(1) Drehung(720 Grad)";
		dieser.Stil.Opazität=1;
		entferneEnde(dies,Ende); 
		}
	
	//Wenn Sie auf das Home-Symbol klicken, dreht es sich beim ersten Mal im Uhrzeigersinn und beim zweiten Mal gegen den Uhrzeigersinn.
	oHome.onclick=Funktion(){
		wenn(anAus)
		{
			this.style.transform="drehen(360 Grad)";
			//Legen Sie die linken und oberen Werte jedes Bildes fest.
			für(var i=0;i<imgLen;i++){
				// hat einen Startwinkel von 30 Grad.
				var oLt=getLeftTop(iR,120/(imgLen-1)*i+30);
				aImg[i].style.left=oLt.l+"px";
				aImg[i].style.top=oLt.t+"px";
				// Jedes Bild hat eine Verzögerung von 100 ms.
				aImg[i].style.transition="0,5 s Ein-Aus-Zeit "+100*i+"ms";
				aImg[i].style.transform="Skalierung(1) Drehung(720 Grad)";
				}
			
			}
		anders
		{
			this.style.transform="drehen(0 Grad)";
			für(var i=0;i<imgLen;i++){
				aImg[i].style.left=0+"px";
				aImg[i].style.top=0+"px";
				//Die Bilder werden in umgekehrter Reihenfolge abgerufen. Jedes Bild hat eine Verzögerung von 100 ms.
				aImg[i].style.transition="0,5 s Ein-Aus-Zeit "+100*(imgLen-i-1)+"ms";
				
				aImg[i].style.transform="Skalierung(1) Drehung(0 Grad)";
				}
			}
		einAus=!einAus;
		
	}
	
}	
	
	
	//Holen Sie sich die linken und oberen Werte des img-Bildes. Satz des Pythagoras: Gegeben sind der eingeschlossene Winkel und die Hypothenuse. Berechnen Sie die Länge der gegenüberliegenden Seite: sin(Radiant)*Hypotenuse. Länge der Seite: cos(Radiant)*Hypotenuse. Bogenmaß = Grad/180*Pi.
	Funktion getLeftTop(iR,iDeg){
		var ileft=Math.round(Math.sin(iDeg/180*Math.PI)*iR);
		var iTop=Math.round(Math.cos(iDeg/180*Math.PI)*iR);
		//Wenn zwei Werte zurückgegeben werden, verwenden Sie die Objektmethode.
		zurückkehren {
			"l":ilinks,
			"t":iOben
			}
		}
	//Endfunktionen hinzufügen und entfernen. Achten Sie auf Übergangsereignisse.
	Funktion addEnd(Objekt,fn){
		obj.addEventListener("Übergangsende",fn,false);
		}
	Funktion removeEnd(obj,fn){
		obj.removeEventListener("Übergangsende",fn,false);
		}
	

</Skript>
</Kopf>

<Text>
<div id="Bühne">
  <div id="nav"> <img src="Bilder/1.png"> <img src="Bilder/2.png"> <img src="Bilder/3.png"> <img src="Bilder/4.png"> <img src="Bilder/5.png"> </div>
  <div id="home"> <img src="images/home.png"> </div>
</div>
</body>
</html>

Oben sind die Details, wie CSS3 Transform Deformation kombiniert mit Ereignissen verwendet, um die fächerförmige Navigation zu vervollständigen. Weitere Informationen zur fächerförmigen Navigation in CSS3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<: Layui implementiert Beispielcode für Abfragen mit mehreren Bedingungen

>>: Detaillierte Erläuterung der grundlegenden Verwendung von Apache POI