Angular4實(shí)現(xiàn)鼠標(biāo)懸停3d傾斜效果

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

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

Angular 是什么

Angular 是由谷歌開發(fā)與維護(hù)一個(gè)開發(fā)跨平臺(tái)應(yīng)用程序的框架，同時(shí)適用于手機(jī)與桌面。

Angular 有什么特點(diǎn)

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

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

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

Angular 提供了哪些功能

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

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

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

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

說一下，實(shí)現(xiàn)這個(gè)的難點(diǎn)在哪

用原生寫的話，大家都會(huì)寫，但是對(duì)于初學(xué)angular的人來說，比如我，決定寫的時(shí)候我整個(gè)人是懵的，原生我會(huì)寫，可是讓我用angular寫，我不知道從何寫起。。。

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

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

2.怎樣獲取鼠標(biāo)操作對(duì)象的event對(duì)象呢，和原生一樣

3.怎樣獲取并操作對(duì)象的各種屬性呢

做這個(gè)的時(shí)候我還不知道。。。查資料看博客。。才知道是這個(gè)寫的

 @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)，就可以完成這個(gè)效果了，畢竟邏輯什么的都是一樣的。

直接貼代碼

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'+ ')';
 }
}

哇這個(gè)截圖工具有點(diǎn)迷醉，真卡，

這里寫圖片描述