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 OOP包机制,类创建的方法定义
Nov 02 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 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
关于尾递归的使用详解
2013/05/02 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
showModelessDialog()使用详解
2006/09/21 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
Python找出9个连续的空闲端口
2016/02/01 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
领导调研接待方案
2014/02/27 职场文书
借款协议书范本
2014/04/22 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
班主任寄语2015
2015/02/26 职场文书
风之谷观后感
2015/06/11 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
python处理json数据文件
2022/04/11 Python