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或css实现滚动广告的几种方案
Jan 28 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 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
Java中final关键字详解
2015/08/10 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
JS实现图片手风琴效果
2020/04/17 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
远程调用的原理
2014/07/05 面试题
秘书专业自荐信范文
2013/12/26 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技