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

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

Artikel empfehlen

Detaillierte Erläuterung der MySql-Datentyp-Tutorialbeispiele

Inhaltsverzeichnis 1. Kurzübersicht 2. Detaillier...

Lösung für das Problem, dass der Eintrag bei der Installation von mysql5.7.18 nicht gefunden werden kann

Bei der Installation von mysql5.7.18 ist folgende...

Initialisieren Sie Ubuntu 16.04 in drei Minuten und stellen Sie Java-, Maven- und Docker-Umgebungen bereit

Fast-Linux-Projektadresse: https://gitee.com/uitc...

Eine kurze Diskussion über die Implementierung von Fuzzy-Abfragen mit Platzhaltern in MySQL

Wenn wir in der MySQL-Datenbank Fuzzy-Abfragen be...

JS-Operationsobjekt-Array zum Erreichen von Beispielcode zum Hinzufügen, Löschen, Ändern und Abfragen

1. Einleitung Kürzlich habe ich einem Freund geho...

Tutorial zur Verwendung von $attrs und $listeners in Vue

Inhaltsverzeichnis einführen Beispiel Zusammenfas...

So zeigen Sie historische Befehle in Linux an und führen sie aus

Historische Befehle anzeigen und bestimmte Befehl...

CSS-Hacks \9 und \0 funktionieren möglicherweise nicht zum Hacken von IE11\IE9\IE8

Jedes Mal, wenn ich eine Webseite oder ein Formul...

Eine detaillierte Einführung in den wget-Befehl in Linux

Inhaltsverzeichnis Installieren Sie zuerst wget H...

Schritte für Docker zum Erstellen eines privaten Lagerhafens

Hafen Harbor ist eine Open-Source-Lösung zum Erst...

Detaillierte Einführung in das benutzerdefinierte Docker-Netzwerk

Inhaltsverzeichnis Benutzerdefiniertes Docker-Net...

Der Unterschied zwischen char und varchar in MySQL

CHAR- und VARCHAR-Typen sind ähnlich und untersch...

Detaillierte Einführung in den Nobody-Benutzer und Nologin im Unix/Linux-System

Was ist der Nobody-Benutzer in Unix/Linux-Systeme...

JS verwendet Canvas-Technologie, um Echarts-Balkendiagramme zu imitieren

Canvas ist ein neues Tag in HTML5. Sie können js ...

Shtml Kurzanleitung

Shtml und asp sind ähnlich. In Dateien mit dem Nam...