這篇文章給大家分享的是有關(guān)Angular4如何實(shí)現(xiàn)鼠標(biāo)懸停3d傾斜效果的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

襄城網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司自2013年起到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

Angular 是什么

Angular 是由谷歌開(kāi)發(fā)與維護(hù)一個(gè)開(kāi)發(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)用等。

通過(guò) 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)大的視圖引擎
事件處理
快速的頁(yè)面渲染
靈活的路由
HTTP 服務(wù)
視圖封裝
AOT、Tree Shaking

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

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

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

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

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

運(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è)寫(xiě)的

 @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)迷醉，真卡，

感謝各位的閱讀！關(guān)于“Angular4如何實(shí)現(xiàn)鼠標(biāo)懸停3d傾斜效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！