Angular4實作滑鼠懸停3d傾斜效果實例分享

本文主要介紹了Angular4實現滑鼠懸停3d傾斜效果，非常不錯，具有參考借鑒價值,需要的朋友可以參考下，希望能幫助到大家。

Angular 是什麼

Angular 是由Google開發與維護一個開發跨平台應用程式的框架，同時適用於手機與桌面。

Angular 有什麼特點

基於 Angular 我們可以建立適用於所有平台的應用。例如：Web 應用、行動 Web 應用、行動應用程式和桌面應用程式等。

透過 Web Worker和服務端渲染 (SSR)，達到在現今Web平台上所能達到的最高渲染速度。

Angular 讓你能夠有效掌控可擴展性。基於 RxJS、Immutable.js 和其它推送模型，能適應海量資料需求。

Angular 提供了哪些功能

動態HTML
強大的表單系統(模板驅動與模型驅動)
強大的視圖引擎
事件處理
快速的頁面渲染
靈活的路由
HTTP 服務
視圖封裝
AOT、Tree Shaking

Angular 與AngularJS 有什麼區別

#不再有Controller和Scope
更好的組件化及程式碼復用
更好的行動端支援
引入了RxJS 與Observable
引入了Zone.js，提供更聰明的變化檢測

這個效果就是錘子科技官網的那個效果，滴滴滴傳送門，效果有一點偏差，整體還行。

說一下，實現這個的難點在哪

用原生寫的話，大家都會寫，但是對於初學angular的人來說，比如我，決定寫的時候我整個人是懵的，原生我會寫，可是讓我用angular寫，我不知道從何寫起。 。 。

運用angular的指令，把這個效果包裝在一個指令裡，下次想用簡直不要太方便凹（在需要的地方添個指令就ok拉），

1.在angular指令裡操作滑鼠事件、傳遞參數，

2.怎樣取得滑鼠操作物件的event物件呢，和原生一樣

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 src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/1a58ae701751024b2046dcc37339afb9-0.gif" class="lazy" title="" alt="Angular4實作滑鼠懸停3d傾斜效果實例分享"></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><a href="http://www.php.cn/js-tutorial-379543.html" target="_self"></a> </p>#js如何實現滑鼠懸停一定時間後觸發事件######

以上是Angular4實作滑鼠懸停3d傾斜效果實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！