Angular4 implementiert das Teilen von Beispielen für den 3D-Neigungseffekt beim Bewegen der Maus

In diesem Artikel wird hauptsächlich Angular4 vorgestellt, um den 3D-Neigungseffekt des Mausschwebens zu erzielen. Es ist sehr gut und hat einen Referenzwert. Ich hoffe, es kann jedem helfen.

Was ist Angular?

Angular ist ein Framework zur Entwicklung plattformübergreifender Anwendungen, das von Google entwickelt und verwaltet wird und sowohl für Mobiltelefone als auch für Desktops geeignet ist.

Was sind die Funktionen von Angular?

Basierend auf Angular können wir Anwendungen für alle Plattformen erstellen. Zum Beispiel: Webanwendungen, mobile Webanwendungen, mobile Anwendungen und Desktopanwendungen usw.

Erzielen Sie durch Web Worker und Server Side Rendering (SSR) die höchste Rendering-Geschwindigkeit, die auf heutigen Webplattformen erreichbar ist.

Angular gibt Ihnen eine effektive Kontrolle über die Skalierbarkeit. Basierend auf RxJS, Immutable.js und anderen Push-Modellen kann es sich an massive Datenanforderungen anpassen.

Welche Funktionen bietet Angular?

Dynamisches HTML
Leistungsstarkes Formularsystem (vorlagengesteuert und modellgesteuert)
Leistungsstarke Ansichts-Engine
Ereignisverarbeitung
Schnelle Seitenwiedergabe
Flexibles Routing
HTTP-Dienst
Kapselung anzeigen
AOT, Tree Shaking

Was ist der Unterschied zwischen Angular und AngularJS

Kein Controller und Scope mehr
Bessere Komponentisierung und Code-Wiederverwendung
Bessere mobile Unterstützung
RxJS und Observable eingeführt
Zone.js eingeführt, um eine intelligentere Änderungserkennung zu ermöglichen

Dies Der Effekt ist der gleiche wie auf der offiziellen Website von Smartisan Technology, Didi Portal. Der Effekt ist etwas abweichend, aber insgesamt ist er in Ordnung.

Sagen Sie mir, was die Schwierigkeit ist, dies zu realisieren

Wenn Sie es in Muttersprache schreiben, kann es jeder schreiben, außer für Leute, die mit Angular noch nicht vertraut sind, wie ich, als ich mich zum Schreiben entschied Ich dachte, ich wäre verwirrt, ich kann nativ schreiben, aber wenn ich gebeten werde, in Winkelform zu schreiben, weiß ich nicht, wo ich anfangen soll. . .

Verwenden Sie den Winkelbefehl, um diesen Effekt in einen Befehl einzuschließen. Dies ist nicht besonders praktisch, wenn Sie ihn das nächste Mal verwenden möchten (fügen Sie einfach einen Befehl hinzu, wo nötig, und es ist in Ordnung),

1. Betreiben Sie Mausereignisse und übergeben Sie Parameter in Winkelanweisungen.

2. So erhalten Sie das Ereignisobjekt des Mausoperationsobjekts, genau wie das native verschiedene Attribute des Objekts abrufen und verwalten

Das wusste ich nicht, als ich das gemacht habe. . . Weitere Informationen finden Sie im Blog. . Erst dann wurde mir klar, dass dies geschrieben wurde von

 @HostListener('mousemove') onMouseMove(para) {}
 @HostListener('mousemove') onMouseMove(para) {
 let e= para ||window.event;
 }

Nachdem Sie die obige Grundstruktur verstanden haben, können Sie diesen Effekt erzielen. Die Logik ist schließlich dieselbe.

 export class DirectivesDirective {
 constructor(private el: ElementRef) {
 }
 @HostListener('mousemove') onMouseMove(para) {
 let e= para ||window.event;
 let pTop = this.el.nativeElement.offsetTop;
 ...
 }
}

Posten Sie den Code direkt

Wow, dieses Screenshot-Tool ist etwas verwirrend, wirklich hängengeblieben,

import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
 selector: '[appDirectives]'
})
export class DirectivesDirective {
// public el;
 private distance = 50;
 private rotationMultiple = 0.1
 constructor(private el: ElementRef) {
 this.distance = 50;
 this.rotationMultiple = 0.1
 }
 @HostListener('mousemove') onMouseMove(para) {
 let e= para ||window.event;
 let pTop = this.el.nativeElement.offsetTop;
 let pLeft = this.el.nativeElement.offsetLeft;
 let pWidth = this.el.nativeElement.offsetWidth;
 let pHeight =this.el.nativeElement.offsetHeight;
 if(e.clientX  pHeight/2 || e.clientX > pWidth/2 && e.clientY > pHeight/2) {
 // 3.4
 let pctX =(((e.clientX - pLeft)/ pWidth) - 0.5);
 let pctY = -(((e.clientY - pTop)/ pHeight) - 0.3);
 this.animate(pctX, pctY, this.rotationMultiple, this.distance);
 }
 if(e.clientX  pWidth/2 && e.clientY <p><br></p><p><img title="" alt="Angular4 implementiert das Teilen von Beispielen für den 3D-Neigungseffekt beim Bewegen der Maus" src="https://img.php.cn/upload/article/000/054/025/1a58ae701751024b2046dcc37339afb9-0.gif"> Verwandte Empfehlungen: </p><p><br></p>JQuery-Mouseover-Inhaltsanimations-Umschalteffekt-Implementierungscode<p><a href="http://www.php.cn/mysql-tutorials-385031.html" target="_self"></a></p>Beispielerklärung des JQuery-Mouseover-Navigations-Unterstreichungs-Slide-Out-Effekts<p><a href="http://www.php.cn/js-tutorial-383323.html" target="_self"> </a></p>So lösen Sie ein Ereignis in js aus, nachdem die Maus eine bestimmte Zeit lang schwebt<p><a href="http://www.php.cn/js-tutorial-379543.html" target="_self"></a></p>

Das obige ist der detaillierte Inhalt vonAngular4 implementiert das Teilen von Beispielen für den 3D-Neigungseffekt beim Bewegen der Maus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!