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倾斜,希望对大家有所帮助
下一篇: node.js中axios使用心得总结