HTML5:Animate cc交互功能之全屏化

原创 2018年04月16日 14:45:05

1.实现效果图,如下:


点击进入:全屏

再点击退出:全屏

2.代码如下:

a.对webkit、moz、ms等浏览器做个兼容处理

		function fulls_btn_h(e)
		{
			var isFullScreen = document.fullScreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
			if (!isFullScreen)
			{
				fullScreen();
			}
			else
			{
				exitFullScreen();
			}
		}

b.进入全屏

		function fullScreen()
		{
			var ele = document.getElementById('canvas');
			var fullScreenEnabled = document.fullScreenEnabled || document.webkitFullScreenEnabled || document.mozFullScreenEnabled || document.msFullScreenEnabled;
			var isFullScreen = document.fullScreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
			if (fullScreenEnabled === undefined || fullScreenEnabled)
			{
				if (isFullScreen === undefined)
				{
					if (ele.requestFullScreen)
					{
						ele.requestFullScreen();
					}
					else if (ele.webkitRequestFullScreen)
					{
						ele.webkitRequestFullScreen();
					}
					else if (ele.mozRequestFullScreen)
					{
						ele.mozRequestFullScreen();
					}
					else if (ele.msRequestFullscreen)
					{
						ele.msRequestFullscreen();
					}
					else
					{
						console.log('不存在进入全屏的方法! => undefined');
					}
				}
				else if (isFullScreen === null)
				{
					if (ele.requestFullScreen)
					{
						ele.requestFullScreen();
					}
					else if (ele.webkitRequestFullScreen)
					{
						ele.webkitRequestFullScreen();
					}
					else if (ele.mozRequestFullScreen)
					{
						ele.mozRequestFullScreen();
					}
					else if (ele.msRequestFullscreen)
					{
						ele.msRequestFullscreen();
					}
					else
					{
						console.log('不存在进入全屏的方法! => null');
					}
				}
				else
				{
					console.log('元素已经是全屏状态了!');
					return true;
				}
			}
			else
			{
				console.log('不支持全屏模式!');
			}
		};

c.退出全屏

		function exitFullScreen()
		{
			var fullScreenEnabled = document.fullScreenEnabled || document.webkitFullScreenEnabled || document.mozFullScreenEnabled || document.msFullScreenEnabled;
			var isFullScreen = document.fullScreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
			if (fullScreenEnabled === undefined || fullScreenEnabled)
			{
				if (isFullScreen === undefined)
				{
					if (document.exitFullScreen)
					{
						document.exitFullScreen();
					}
					else if (document.webkitExitFullScreen)
					{
						document.webkitExitFullScreen();
					}
					else if (document.webkitCancelFullScreen)
					{
						document.webkitCancelFullScreen();
					}
					else if (document.mozCancelFullScreen)
					{
						document.mozCancelFullScreen();
					}
					else if (document.msExitFullscreen)
					{
						document.msExitFullscreen();
					}
					else if (document.msCancelFullScreen)
					{
						document.msCancelFullScreen();
					}
					else
					{
						console.log('不存在退出全屏的方法! => undefined');
					}
				}
				else if (isFullScreen !== null)
				{
					if (document.exitFullScreen)
					{
						document.exitFullScreen();
					}
					else if (document.webkitExitFullScreen)
					{
						document.webkitExitFullScreen();
					}
					else if (document.webkitCancelFullScreen)
					{
						document.webkitCancelFullScreen();
					}
					else if (document.mozCancelFullScreen)
					{
						document.mozCancelFullScreen();
					}
					else if (document.msExitFullscreen)
					{
						document.msExitFullscreen();
					}
					else if (document.msCancelFullScreen)
					{
						document.msCancelFullScreen();
					}
					else
					{
						console.log('不存在退出全屏的方法! => null');
					}
				}
				else
				{
					console.log('元素已经是非全屏状态了!');
					return true;
				}
			}
			else
			{
				console.log('不支持全屏模式!');
			}
		}

d.进行调用

if (!S.fulls_btn.hasEventListener("click"))
		{
			S.fulls_btn.addEventListener("click", fulls_btn_h);
		}

Adobe Animate CC 在图形中添加交互性代码

最近在研究HTML Canvas,涉及到Adobe Animate CC的使用,看了一下官方文档,很繁琐,下面简单的总结了一下在图形中添加交互性代码的方法。AnimateCC在图形中添加交互性代码的方...
  • qq_36173194
  • qq_36173194
  • 2018-03-03 15:51:24
  • 163

PS CC 2015 GIF动画制作 和 导出方法,图像序列

PS CC 2015 GIF动画制作 和 导出方法,图像序列 今儿用到了PS制作动画的功能,我用的是PS CC 2015.3.1版本的,网上找怎么导出图像序列,也没个像样回答的,还是我给总结一下吧...
  • KimBing
  • KimBing
  • 2016-10-21 22:33:54
  • 15664

使用CSS3实现动态加载gif图片的效果

css代码: .glyphicon-refresh-animate { -animation: spin .7s infinite linear; -ms-animation: sp...
  • zhangfeng2124
  • zhangfeng2124
  • 2016-12-21 10:43:25
  • 1758

【CreateJS】WebStorm+Adobe Animate CC 搭配开发HTML5,入门教程

前提环境: ①安装好Adobe Animate CC ②安装好WebStorm,或者Sublime Text 2,Visual Studio Code之类的编程ide 流程:...
  • arvin0
  • arvin0
  • 2016-07-26 11:03:51
  • 16925

教你一招让你高效搞定高品质的H5交互动画

一般在H5开发流程中,都是交互动画设计师利用Animate cc(即原来的Flash)把动画的原型设计出来,然后交付给UI部门进行开发实现效果。而做过动画开发的UI都知道搞动画开发是较为耗时费力的,而...
  • yylurex
  • yylurex
  • 2017-05-08 15:58:12
  • 3224

HTML5:Animate cc交互功能之全屏化

1.实现效果图,如下:点击进入:全屏再点击退出:全屏2.代码如下:a.对webkit、moz、ms等浏览器做个兼容处理 function fulls_btn_h(e) { var isFu...
  • wrk2466836002
  • wrk2466836002
  • 2018-04-16 14:45:05
  • 15

HTML5----图片或文字指定位子隐藏到显示动态效果

$(window).scroll( function(){ scrollList(); }) function scrollList(){ if($(window).scrollTop() > ...
  • damys
  • damys
  • 2014-05-17 15:19:44
  • 5095

html5动画制作工具Adobe Edge Animate

由于本人工作需要,需要做一些ipad杂志,杂志里需要一些动态效果,ipad不兼容flash,所以html5,css3在ipad动画特效中是一个很好的解决方案。偶尔接触到adobe新推出的 Edge A...
  • just_do_it2009
  • just_do_it2009
  • 2013-04-23 10:19:00
  • 2033

Adobe Animate:创建HTML5动画01软件基本问题

目前用的是Adobe Edge Animate cc 2015版 ,刚刚接触记录一些简单的操作步骤。 Adobe Edge Animate中文操作手册 :http://www.docin.com/...
  • ymc_webpack
  • ymc_webpack
  • 2017-02-17 09:48:30
  • 394

Adobe Animate CC 2017经典教程(epub版-高清文字-kindle)

  • 2017年11月07日 17:01
  • 30.83MB
  • 下载
收藏助手
不良信息举报
您举报文章:HTML5:Animate cc交互功能之全屏化
举报原因:
原因补充:

(最多只允许输入30个字)