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


Posted in Javascript onOctober 25, 2017

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倾斜效果

总结

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

Javascript 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
javascript实现标签切换代码示例
May 22 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
react-router中的属性详解
Jun 01 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Vue如何清空对象
Mar 03 Vue.js
JavaScript获取URL参数的方法分享
Apr 07 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 #Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 #Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 #Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 #Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 #Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 #Javascript
JS获取当前地理位置的方法
Oct 25 #Javascript
You might like
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
浅谈node的事件机制
2017/10/09 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
四川成都导游欢迎词
2014/01/18 职场文书
婚宴祝酒词大全
2015/08/10 职场文书