この記事では、マウスホバーの 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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
