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 相关文章推荐
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
原生JS实现天气预报
Jun 16 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
详解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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
前端必学之PHP语法基础
2016/01/01 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
python编码最佳实践之总结
2016/02/14 Python
windows下ipython的安装与使用详解
2016/10/20 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
python实现彩票系统
2020/06/28 Python
Python二维码生成识别实例详解
2019/07/16 Python
原生python实现knn分类算法
2019/10/24 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
《红军不怕远征难》教学反思
2014/04/14 职场文书
搞笑车尾标语
2014/06/23 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
python opencv旋转图片的使用方法
2021/06/04 Python
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA