Angular4實現(xiàn)鼠標懸停3d傾斜效果

更新時間：2017年10月25日 11:49:56 作者：徐行莫停

這篇文章主要介紹了Angular4實現(xiàn)鼠標懸停3d傾斜效果，非常不錯，具有參考借鑒價值,需要的朋友可以參考下

Angular 是什么

Angular 是由谷歌開發(fā)與維護一個開發(fā)跨平臺應(yīng)用程序的框架，同時適用于手機與桌面。

Angular 有什么特點

基于 Angular 我們可以構(gòu)建適用于所有平臺的應(yīng)用。比如：Web 應(yīng)用、移動 Web 應(yīng)用、移動應(yīng)用和桌面應(yīng)用等。

通過 Web Worker和服務(wù)端渲染 (SSR)，達到在如今Web平臺上所能達到的最高渲染速度。

Angular 讓你能夠有效掌控可伸縮性?；?RxJS、Immutable.js 和其它推送模型，能適應(yīng)海量數(shù)據(jù)需求。

Angular 提供了哪些功能

動態(tài)HTML
強大的表單系統(tǒng) (模板驅(qū)動和模型驅(qū)動)
強大的視圖引擎
事件處理
快速的頁面渲染
靈活的路由
HTTP 服務(wù)
視圖封裝
AOT、Tree Shaking

Angular 與 AngularJS 有什么區(qū)別

不再有Controller和 Scope
更好的組件化及代碼復用
更好的移動端支持
引入了 RxJS 與 Observable
引入了 Zone.js，提供更加智能的變化檢測

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

說一下，實現(xiàn)這個的難點在哪

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

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

1.在angular指令里操作鼠標事件、傳遞參數(shù)，

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 divTop = this.el.nativeElement.offsetTop;
 ...
 }
}

了解了上面的基本結(jié)構(gòu)，就可以完成這個效果了，畢竟邏輯什么的都是一樣的。

直接貼代碼

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 divTop = this.el.nativeElement.offsetTop;
 let divLeft = this.el.nativeElement.offsetLeft;
 let divWidth = this.el.nativeElement.offsetWidth;
 let divHeight =this.el.nativeElement.offsetHeight;
 if(e.clientX < divWidth/2 && e.clientY > divHeight/2 || e.clientX > divWidth/2 && e.clientY > divHeight/2) {
 // 3.4
 let pctX =(((e.clientX - divLeft)/ divWidth) - 0.5);
 let pctY = -(((e.clientY - divTop)/ divHeight) - 0.3);
 this.animate(pctX, pctY, this.rotationMultiple, this.distance);
 }
 if(e.clientX < divWidth/2 && e.clientY < divHeight/2 || e.clientX > divWidth/2 && e.clientY < divHeight/2) {
 // 1.2
 let pctX =((e.clientX - divLeft)/ divWidth) - 0.7;
 let pctY = ((e.clientY - divTop)/ divHeight) - 0.5;
 this.animate(pctX, pctY, this.rotationMultiple, this.distance);
 }
 }
 private animate(pctX: number, pctY: number, rotationMultiple: number, distance: number) {
 let rotateX = pctY * rotationMultiple * -180;
 let rotateY = pctX * rotationMultiple * 180;
 this.el.nativeElement.style.transform = ' rotateX(' + rotateX + 'deg' + ')' + ' rotateY(' + rotateY + 'deg'+ ')';
 }
}

哇這個截圖工具有點迷醉，真卡，

這里寫圖片描述