Angular4 implémente le partage d'exemples d'effet d'inclinaison 3D au survol de la souris

Cet article présente principalement Angular4 pour obtenir l'effet d'inclinaison 3D du survol de la souris. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer.

Qu'est-ce qu'Angular

Angular est un framework de développement d'applications multiplateformes développé et maintenu par Google, et convient aussi bien aux téléphones mobiles qu'aux ordinateurs de bureau.

Quelles sont les fonctionnalités d'Angular

Basé sur Angular, nous pouvons créer des applications pour toutes les plateformes. Par exemple : applications Web, applications Web mobiles, applications mobiles et applications de bureau, etc.

Grâce aux Web Workers et au Server Side Rendering (SSR), obtenez la vitesse de rendu la plus élevée possible sur les plateformes Web actuelles.

Angular vous donne un contrôle efficace sur l'évolutivité. Basé sur RxJS, Immutable.js et d'autres modèles push, il peut s'adapter à des besoins massifs en données.

Quelles fonctions Angular fournit-il ?

HTML dynamique
Système de formulaire puissant (piloté par un modèle et piloté par un modèle)
Moteur d'affichage puissant
Traitement des événements
Rendu rapide des pages
Routage flexible
Service HTTP
Encapsulation de vue
AOT, Tree Shaking

Quelle est la différence entre Angular et AngularJS

Plus de contrôleur et de portée
Meilleure composantisation et réutilisation du code
Meilleur support mobile
Introduit de RxJS et Observable
Introduction de Zone.js pour fournir une détection plus intelligente des changements

Ceci L'effet est le même que celui sur le site officiel de Smartisan Technology, Didi Portal L'effet est un peu décalé, mais dans l'ensemble ça va.

Dites-moi quelle est la difficulté de réaliser cela

Si vous l'écrivez en natif, tout le monde peut l'écrire, mais pour les personnes qui débutent en angulaire, comme moi, quand j'ai décidé d'écrire ça, j'étais confus, je peux écrire nativement, mais si on me demande d'écrire en angulaire, je ne sais pas par où commencer. . .

Utilisez la commande angulaire pour envelopper cet effet dans une commande. Ce ne sera pas très pratique si vous souhaitez l'utiliser la prochaine fois (ajoutez simplement une commande là où c'est nécessaire et tout ira bien),

1. Opérer les événements de la souris et transmettre les paramètres dans les instructions angulaires,

2. Comment obtenir l'objet événement de l'objet opération de la souris, tout comme celui natif

3. et faire fonctionner divers attributs de l'objet

Je ne le savais pas quand j'ai fait ça. . . Consultez le blog pour plus d'informations. . Ce n'est qu'à ce moment-là que j'ai réalisé que ceci avait été écrit par

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

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

Après avoir compris la structure de base ci-dessus, vous pouvez obtenir cet effet. Après tout, la logique est la même.

Publiez le code directement

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>Wow, cet outil de capture d'écran est un peu déroutant, vraiment coincé, <br></p><p><img title="" alt="Angular4 implémente le partage dexemples deffet dinclinaison 3D au survol de la souris" src="https://img.php.cn/upload/article/000/054/025/1a58ae701751024b2046dcc37339afb9-0.gif"></p><p> Recommandations associées : <br></p><p><a href="http://www.php.cn/mysql-tutorials-385031.html" target="_self">Code d'implémentation de l'effet de commutation d'animation de contenu au survol de la souris JQuery</a></p><p><a href="http://www.php.cn/js-tutorial-383323.html" target="_self">Exemple d'explication de l'effet coulissant de soulignement de la navigation au survol de la souris jquery</a></p> <p><a href="http://www.php.cn/js-tutorial-379543.html" target="_self">Comment déclencher un événement en js après le survol de la souris pendant un certain temps</a></p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!