Angular4는 마우스 호버 3D 기울기 효과 예제 공유를 구현합니다.

이 기사에서는 마우스 호버의 3D 기울기 효과를 구현하기 위해 주로 Angular4를 소개합니다. 매우 훌륭하고 참고할 가치가 있습니다. 필요한 친구가 모두 참고할 수 있기를 바랍니다.

Angular란 무엇입니까

Angular는 휴대전화와 데스크톱 모두에 적합한 크로스 플랫폼 애플리케이션을 개발하기 위해 Google에서 개발하고 유지관리하는 프레임워크입니다.

Angular의 기능은 무엇인가요?

Angular를 기반으로 모든 플랫폼용 애플리케이션을 구축할 수 있습니다. 예: 웹 애플리케이션, 모바일 웹 애플리케이션, 모바일 애플리케이션, 데스크톱 애플리케이션 등

웹 작업자 및 서버 측 렌더링(SSR)을 통해 오늘날의 웹 플랫폼에서 달성할 수 있는 최고의 렌더링 속도를 달성하세요.

Angular를 사용하면 확장성을 효과적으로 제어할 수 있습니다. RxJS, Immutable.js 및 기타 푸시 모델을 기반으로 대규모 데이터 요구 사항에 적응할 수 있습니다.

Angular가 제공하는 기능

동적 HTML
강력한 양식 시스템(템플릿 기반 및 모델 기반)
강력한 뷰 엔진
이벤트 처리
빠른 페이지 렌더링
유연한 라우팅
HTTP 서비스
View encapsulation
AOT, Tree Shaking

무엇 Angular와 AngularJS의 차이점입니다

더 이상 컨트롤러와 범위가 없습니다
더 나은 구성 요소화 및 코드 재사용
더 나은 모바일 지원
RxJS 및 Observable 도입
더 많은 지능 변경 감지를 제공하기 위해 Zone.js 도입

이 효과는 공식 버전에 있는 효과입니다. 스마티산테크놀로지 홈페이지, 디디포털 효과가 조금 아쉽지만 전체적으로 괜찮습니다.

이것을 실현하는데 어려움이 무엇인지 말해 보세요

원어민 글쓰기를 사용하면 누구나 쓸 수 있지만 저처럼 Angular를 처음 접하는 사람들은 쓰기로 결정했을 때 완전히 혼란스러웠습니다. 네이티브로 작성하세요. 하지만 각도로 작성해 보겠습니다. 어디서부터 시작해야 할지 모르겠습니다. . .

이 효과를 명령으로 감싸려면 각도 명령을 사용하십시오. 다음에 사용하려면 너무 편리하지 않습니다(필요한 곳에 명령을 추가하면 괜찮습니다).

1. 각도 명령, 전달 매개변수

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><a href="http://www.php.cn/mysql-tutorials-385031.html" target="_self">jQuery 마우스 오버 콘텐츠 애니메이션 전환 효과 구현 코드</a></p><p><a href="http://www.php.cn/js-tutorial-383323.html" target="_self">예제 설명 jquery mouseover 탐색 밑줄 슬라이드 아웃 효과 중지</a></p><p><a href="http://www.php.cn/js-tutorial-379543.html" target="_self">JS를 사용하여 일정 시간 동안 마우스를 올린 후 이벤트를 트리거하는 방법</a></p>

위 내용은 Angular4는 마우스 호버 3D 기울기 효과 예제 공유를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!