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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
javascript 进度条 实现代码
Jul 30 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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获取音频文件的相关信息
2015/06/22 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
js兼容标准的表格变色效果
2008/06/28 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
用vue写一个日历
2020/11/02 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python数据挖掘需要学的内容
2019/06/23 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
python为什么会环境变量设置不成功
2020/06/23 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
会计找工作求职信范文
2013/12/09 职场文书
申报职称专业技术个人的自我评价
2013/12/12 职场文书
《口技》教学反思
2014/02/21 职场文书
葬礼司仪主持词
2014/03/31 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
永远是春天观后感
2015/06/12 职场文书
2016年母亲节寄语
2015/12/04 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers