架构师_程序员_码农网

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 23583|回复: 14

[Angular] angular 7某个div(地图)全屏教程

[复制链接]
发表于 2019-5-21 10:39:45 | 显示全部楼层 |阅读模式
以前写过一些div全屏的教程,都是纯html、js网页,这次框架使用的是angular,如何实现某个div全屏呢?文中是让地图的所处的div全屏,效果图如下:

full.gif

以前的文章:

html5  判断是否处于全屏状态
https://www.itsvse.com/thread-3807-1-1.html
(出处: 架构师_程序员)
html5 退出全屏事件,监听esc按键事件
https://www.itsvse.com/thread-3800-1-1.html
(出处: 架构师_程序员)
百度地图全屏代码(div全屏代码)
https://www.itsvse.com/thread-3801-1-1.html
(出处: 架构师_程序员)

使用screenfull.js全屏插件,地址:https://github.com/sindresorhus/screenfull.js

npm安装:


angular 7引入插件:


html页面地图代码:


触发onClickScreenFull事件,使该div全屏,ts脚本代码如下:

游客,如果您要查看本帖隐藏内容请回复


HTML5 Fullscreen API in Angular.js 插件也可以实现全屏效果,我这里就不测试了,地址:https://github.com/hrajchert/angular-screenfull

参考资料:https://github.com/sindresorhus/screenfull.js/issues/126




上一篇:请教 java 操作 rabbitmq ,basicQos() 无效问题
下一篇:常用开源许可协议(GPL、BSD、MIT、Mozilla、Apache)介绍
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2020-1-14 11:40:19 | 显示全部楼层
报错了,ERROR in node_modules/screenfull/dist/screenfull.d.ts(1,1): error TS1084: Invalid 'reference' directive syntax.
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2020-6-25 16:22:29 | 显示全部楼层
大佬大佬大佬大佬大佬大佬大佬大佬大佬大佬大佬大佬大佬大佬大佬
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2019-8-10 09:53:31 | 显示全部楼层
为了看内容而回复的,如果真可以用,那么666
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2019-5-21 12:49:59 | 显示全部楼层
mark一下
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2019-6-20 15:56:10 | 显示全部楼层
mark一下
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2019-7-23 10:30:56 | 显示全部楼层
mark下来,方便以后
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2019-9-5 03:20:31 | 显示全部楼层
好,超级好,超级超级好
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2019-11-1 14:02:02 | 显示全部楼层
感谢楼主分享这么好的资料
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2019-12-28 11:29:17 | 显示全部楼层
花两块钱买了邀请码就是要看看
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2019-12-30 15:03:12 | 显示全部楼层
mark一下
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2020-1-4 17:35:42 | 显示全部楼层
打断点打发士大夫撒地方
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2024-3-28 21:33

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表