收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

Angular4实现鼠标悬停3d倾斜效果

Angular 是什么

Angular 是由谷歌开发与维护一个开发跨平台应用程序的框架,同时适用于手机与桌面。

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

哇 这个截图工具有点迷醉,真卡,

查看图片

总结

以上所述是小编给大家介绍的Angular4实现鼠标悬停3d倾斜,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

AngularJS实现的select二级联动下拉菜单功能示例
本文实例讲述了AngularJS实现的select二级联动下拉菜单功能。分享给大家供大家参考,具体如下:!DOCTYPEhtmlhtmlng-appheadlang="en"metacharset="UTF-8"title/title/headscri

vue 数组和对象不能直接赋值情况和解决方法(推荐)
Vue不能检测以下变动的数组:当你利用索引直接设置一个项时,例如:vm.items[indexOfItem]=newValue当你修改数组的长度时,例如:vm.items.length=newLength当第一

Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
废话不多说了,直接给大家贴代码,具体代码如下所示;!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlestyle*{margin:0;padding:0;}.sspan{background:#28a54c;color:#f

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号