Angular4 はマウス ホバー 3D チルト効果のサンプル共有を実装します

この記事では、マウスホバーの 3D チルト効果を実現するための Angular4 を主に紹介します。これは非常に優れており、必要な方は参考にしていただければ幸いです。

Angular とは

Angular は、携帯電話とデスクトップの両方に適したクロスプラットフォーム アプリケーションを開発するために Google によって開発および保守されているフレームワークです。

Angularの機能は何ですか

Angularに基づいて、すべてのプラットフォーム向けのアプリケーションを構築できます。例: Web アプリケーション、モバイル Web アプリケーション、モバイル アプリケーションとデスクトップ アプリケーションなど。

Web ワーカーとサーバー サイド レンダリング (SSR) を通じて、今日の Web プラットフォームで達成可能な最高のレンダリング速度を実現します。

Angular を使用すると、スケーラビリティを効果的に制御できます。 RxJS、Immutable.js、その他のプッシュ モデルに基づいており、大量のデータのニーズに適応できます。

Angularが提供する機能

ダイナミックHTML
強力なフォームシステム(テンプレート駆動およびモデル駆動)
強力なビューエンジン
イベント処理
高速ページレンダリング
柔軟なルーティング
HTTPサービス
ビューのカプセル化
AOT、ツリーシェイク

Angular と AngularJS の違いです

コントローラーとスコープは不要
コンポーネント化とコードの再利用が向上
モバイルサポートが向上
RxJS と Observable が導入されました
より多くのインテリジェンスを提供する Zone.js が導入されました

この効果は公式のものですSmartisan Technology の Web サイト、Didi ポータル 効果は少し異なりますが、全体的には問題ありません。

これを実現するのに何が難しいか教えてください

ネイティブで書けば誰でも書けますが、私のようなAngularを初めて使う人にとっては、書こうと決めたときは完全に混乱していました。ネイティブですが、角度で書かせてください。どこから始めればよいかわかりません。 。 。

この効果をコマンドでラップするには、angular コマンドを使用します。これは、次回使用する場合にはあまり便利ではありません (必要な場所にコマンドを追加すれば問題ありません)。

1. でマウス イベントを操作します。 angular コマンド、パラメータの受け渡し、

2. ネイティブと同じようにマウス操作オブジェクトのイベント オブジェクトを取得する方法

3. オブジェクトのさまざまな属性を取得して操作する方法

これをしました。 。 。情報についてはブログをご覧ください。 。このとき初めて、これが

 @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;
 ...
 }
}

によって書かれたものであることを知りました。上記の基本構造を理解した後、この効果を実現できます。結局のところ、ロジックは同じです。

コードを直接投稿してください

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 はマウス ホバー 3D チルト効果のサンプル共有を実装します" src="https://img.php.cn/upload/article/000/054/025/1a58ae701751024b2046dcc37339afb9-0.gif"></p>関連推奨事項: <p><br></p><p>jQuery マウス ホバー コンテンツ アニメーション切り替え効果の実装コード <a href="http://www.php.cn/mysql-tutorials-385031.html" target="_self"></a></p><p>例の説明jqueryのマウスホバーナビゲーションの下線スライドアウト効果を停止します<a href="http://www.php.cn/js-tutorial-383323.html" target="_self"></a></p><p>一定時間マウスをホバーした後にjsを使用してイベントをトリガーする方法<a href="http://www.php.cn/js-tutorial-379543.html" target="_self"></a></p>

以上がAngular4 はマウス ホバー 3D チルト効果のサンプル共有を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。