HTML5:Animate cc交互之单页面点击多按钮

原创 2018年04月17日 10:34:58

1.实现效果

某个帧上面,有1-8个按钮,点击不同的按钮,跳转到相应的帧上面去

2.代码

for (i = 1; i < 8; i++)
{
	
	S["list_btn" + i].addEventListener("click", listEvent);//遍历所有的按钮,给按钮1-7加上点击事件
}
function listEvent(e)
{
	for (i = 1; i < 8; i++)
	{
		S["list_btn" + i].removeEventListener("click", listEvent);//删除掉这些点击事件
	}
	num = e.currentTarget.name.charAt(8);//返回指定位置的字符串,第8个字符是什么,也就是获取i charAt()只能截取1个,2个的话可以用substring(8,10)
//	e.currentTarget.name当前舞台上的元件名字 //截取 数字
	//alert(num)
	if(num==1)//如果i 是 1
	{
		S.gotoAndPlay("list_1")//就会跳转到list_1
	}
	else if(num==2)
	{
		S.gotoAndPlay("list_2")
	}
	else if(num==3)
	{
		S.gotoAndPlay("list_3")
	}
	else if(num==4)
	{
		S.gotoAndPlay("list_4")
	}
	else if(num==5)
	{
		S.gotoAndPlay("list_5")
	}
	else if(num==6)
	{
		S.gotoAndPlay("list_6")
	}
	else if(num==7)
	{
		S.gotoAndPlay("list_7")
	}
}

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
  • 387

【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
  • 16918

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

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

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

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

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
  • 2032

animate cc在ios上点击canvas闪黑以及在安卓微信里巨卡的解决方案

在ios里点canvas整个页面会闪黑一下,只需要在js最后增加一句代码即可 createjs.Touch.enable(stage); 在微信里巨卡,也是一行代码...
  • jwxkk
  • jwxkk
  • 2017-11-24 10:41:05
  • 914

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 实现当前页面跳转(单页面)

单一页面应用程序 header{font-size: 20px;color: #646464;} nav{font-size: 24px;color: #969696;} section{o...
  • weixin_33768153
  • weixin_33768153
  • 2016-09-13 09:52:56
  • 570

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

  • 2017年11月07日 17:01
  • 30.83MB
  • 下载

Edge Animate轻松制作HTML5动画教程及源码

  • 2015年11月21日 13:37
  • 8.12MB
  • 下载
收藏助手
不良信息举报
您举报文章:HTML5:Animate cc交互之单页面点击多按钮
举报原因:
原因补充:

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