iH5高级教程：H5交互菜单,下拉菜单特效
iH5高级教程：H5创意展示,3D翻书特效
iH5高级教程:H5创意展示，3D翻书特效3D电视电影已经成为一种人们生活中的一种习惯，电子书配上3D也让我们有更好的体验，下面教大家来制作一个非常简单的3D翻书。
步骤：第一步：添加滑动时间轴选中舞台，点击工具栏里的“滑动时间轴”图标，在舞台上画出一个框，然后点击滑动时间轴设置滑动时间轴的宽高和舞台的宽高一样。
第二步:滑动时间轴的设置1.选中滑动时间轴，点击工具栏透明按钮工具，在舞台中央位置上画一个框,作为3D旋转的父对象。
在滑动时间轴下设置透明按钮作为3D旋转的父对象,是为了图片旋转设置视距,视距越大，3D旋转的效果越不明显。
2.选中3D旋转父对象，点击透明按钮工具,在舞台左上角添加透明按钮，透明按钮的中间与舞台左侧边缘重合。
（为了观察舞台外的素材,舞台属性面板剪切设为NO）3.选中透明按钮,添加一张图片，图片设置宽高和舞台一样,透明按钮设置个颜色通过观察透明按钮和图片,可以发现图片左侧边缘刚好在透明按钮的中间,这样设置就可以保证以图片的边缘旋转。
4.选中图片，添加轨迹,点ADD添加关键帧，在时间轴窗口的第一个框里输入2，点回车，小黑块到达2秒位置，图片属性面板的Y轴旋转设置为—90度，点击ADD添加关键帧。
通过透明按钮旋转带动图片的旋转，透明按钮的Y轴旋转随着时间轴的播放从0变成—90度,给透明按钮设置个颜色通过观察透明按钮和图片的Y轴,就可以发现我们的图片刚好在透明按钮的中心，这是因为我们的旋转是以透明按钮的中心来旋转的，这样设置就可以保证我们是以图片的边缘旋转.第三步：依次设置其他按钮,添加其他透明按钮,和第一个按钮设置方法一样，只是时间轴上的时间不同,按顺序累加.最后一张图片不需要旋转翻页，所以不需要透明按钮。
第四步：选中最后一张图片,点击文本工具,输入BACK，选中文本，添加事件。
触发条件手指按下，目标对象滑动时间轴，目标动作跳至某时刻。
时间0。
即翻页到最后一页,点击BACK，回到第一页。
h5下拉刷新原理
h5下拉刷新原理H5下拉刷新是一种在移动端Web应用中常见的交互效果，用户可以通过在页面顶部向下拉动，触发刷新页面的操作。
这种效果通常是通过结合HTML、CSS和JavaScript来实现的。
下面是H5下拉刷新的基本原理：1. 监听下拉动作：使用JavaScript监听触摸或鼠标事件，监测用户在页面顶部的下拉动作。
在移动端，通常使用`touchstart`、`touchmove`和`touchend`等触摸事件，而在桌面端可以使用`mousedown`、`mousemove`和`mouseup`等鼠标事件。
2. 获取下拉距离：在触摸或鼠标移动过程中，通过获取触摸点的位置变化或鼠标的移动距离，来计算用户下拉的距离。
3. 判断下拉距离是否达到触发条件：一般来说，下拉到一定的距离之后才触发刷新操作，以防止用户在正常滚动过程中误触发刷新。
4. 显示刷新提示：当下拉距离达到触发条件时，显示一个提示用户释放以触发刷新的界面元素，如下拉刷新图标、文字等。
5. 触发刷新操作：当用户释放手指或鼠标按钮时，触发相应的刷新操作，可以是重新加载页面内容、异步请求数据等。
6. 隐藏刷新提示：在刷新操作完成后，隐藏之前显示的刷新提示，将页面恢复到正常状态。
下面是一个简单的例子，演示了如何使用JavaScript来实现基本的下拉刷新效果：```html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>下拉刷新示例</title><style>body {overflow: hidden; /* 阻止页面滚动*/}#refresh-container {height: 50px;text-align: center;line-height: 50px;background-color: #f0f0f0;border-bottom: 1px solid #ccc;}</style></head><body><div id="refresh-container">下拉刷新...</div><div id="content"><!--页面内容--></div><script>var startY, moveY;document.getElementById('content').addEventListener('touchstart', function (e) { startY = e.touches[0].pageY;});document.getElementById('content').addEventListener('touchmove', function (e) { moveY = e.touches[0].pageY - startY;// 判断下拉距离是否达到触发条件if (moveY > 50) {document.getElementById('refresh-container').innerHTML = '释放刷新...';} else {document.getElementById('refresh-container').innerHTML = '下拉刷新...';}});document.getElementById('content').addEventListener('touchend', function () { // 判断是否达到触发条件，是则执行刷新操作if (moveY > 50) {// 执行刷新操作，例如重新加载页面内容location.reload();}// 恢复初始状态document.getElementById('refresh-container').innerHTML = '下拉刷新...';});</script></body></html>```这只是一个简单的示例，实际上，为了提高用户体验和适应不同设备，一般需要使用更复杂的实现方式，可能涉及到CSS动画、防抖节流等技术。
iH5高级教程：H5交互进阶,打字机效果
iH5⾼级教程：H5交互进阶,打字机效果iH5⾼级教程：H5交互进阶，打字机效果第⼀步：添加素材1、选中舞台，点击⾳乐⼯具，添加背景⾳乐素材，⾳乐属性设为⾃动播放YES，同样添加打字机声⾳的⾳乐素材，⾳乐属性设为⾃动播放NO（因为只有在打字机动的时候才有声⾳）。
选中舞台，点击图⽚⼯具，添加打字机图⽚。
选中打字机图⽚，添加两个⾳乐按钮图⽚。
按钮灰在按钮红的上⾯，即打开作品⾸先显⽰按钮灰。
选中按钮灰，点击事件⼯具，添加2个事件。
⼿指按下，⾳乐暂停，并且让按钮红盖住按钮灰。
选中按钮红，点击事件⼯具，添加2个事件。
⼿指按下，⾳乐继续播放，并且让按钮灰盖住按钮红。
选中舞台，点击时间轴⼯具，添加时间轴1（根据这个案例的需要，将时间轴的⾃动播放和循环播放属性设置为NO，时间轴时长设为65s），在时间轴下添加1、2、3、4、5图⽚素材，即打字机中出现的图⽚，让这些图⽚成为时间轴1的⼦对象。
同样的⽅法添加时间轴2，并在它下⾯添加打字机的GIF图⽚。
时间轴1重命名为24⽓节，时间轴2重命名为打字。
第⼆步：设置打字出现的效果选中时间轴1下的每张图⽚，点击⼯具栏中的轨迹按钮，为每张图⽚添加轨迹。
然后在轨迹上添加图⽚运动的关键帧。
例如，选中图⽚1的轨迹添加关键帧，控制图⽚1的运动。
在这个案例中，这些图⽚是从下到上出现的，所以只需要选中关键帧，修改图⽚的Y坐标就可以达到向上运动的效果。
⽐如在图⽚1轨迹1中，0秒关键帧时，图⽚1的坐标为（0, 950），在11秒的地⽅，添加另⼀个关键帧，并设置图⽚1的坐标为（0, -602），这样图⽚1就在11秒的时间内从Y坐标为950的位置向上移动到了-602的位置，即视觉上打字机中的图⽚向上慢慢出现了。
选中打字时间轴，添加打字GIF，选中打字GIF，点击轨迹，使打字GIF有左右移动的效果。
第⼀个关键帧和第三个关键帧设置⼀样。
第⼆个关键帧，GIF处于右边。
第四步：选中舞台，添加透明按钮1，区域为“按下看清每⼀步”的⼤⼩，或可以拉得更⼤。
HTML5、Select下拉框右边加图标的实现代码（增进用户体验）
HTML5、Select下拉框右边加图标的实现代码（增进⽤户体验）本⽂给⼤家讲h5、select下拉框右边加图标，深度美化页⾯增进⽤户体验效果1.那么我们先来看⼀下效果吧！2.再看看h5的结构：<div id="login-div"><div class="select-wrapper"><select id="selector1"><option value="" disabled selected>请选择系统：</option><option value="1">微信-苹果</option><option value="2">微信-安卓</option></select><img src="ossweb-img/arrow.png" alt="" class="arrow" /></div><div class="select-wrapper"><select id="selector2"><option value="" disabled selected>请选择渠道：</option><option value="1">渠道1</option><option value="2">渠道2</option></select><img src="ossweb-img/arrow.png" alt="" class="arrow" /></div><div class="select-wrapper"><select id="selector3"><option value="" disabled selected>请选择⼤区：</option><option value="1">⼤区1</option><option value="2">⼤区2</option></select><img src="ossweb-img/arrow.png" alt="" class="arrow" /></div><div class="select-wrapper"><select id="selector4"><option value="" disabled selected>请选择⾓⾊：</option><option value="1">⾓⾊1</option><option value="2">⾓⾊2</option></select><img src="ossweb-img/arrow.png" alt="" class="arrow" /></div><p id="notice">单个帐号只能领取⼀次奖励</p><img src="ossweb-img/comfire1.png" alt="" id="comfire1"/></div>3.样式部分是⽤了sass进⾏控制的，如果不会sass也可以换成css。
iH5基础教程：HTML5编辑器介绍
iH5基础教程：HTML5编辑器介绍一、公司介绍iH5是国际领先的HTML5制作工具和服务平台，你可以使用iH5轻松制作具有丰富动态效果的HTML5网页应用，可视化操作界面，无需编程基础。
二、网站结构1、注册登录页面填写信息注册账号或点击右上角进入登录页面。
2、ih5首页（1）作品推荐点击封面可查看作品，点击左上角可收藏此作品，点击右上角可获得作品二维码与作品链接，点击关注可关注作品的作者。
查看作品时，点击右上角可全屏观看，还可以关注作者或联系作者。
关注的设计师会出现在首页目录系统消息之下。
点击精品模板，可以按分类查看模板，点击下载按钮可下载模板，下载后将保存到您的个人主页下面，下载付费模板需充值V币，模板下载后不能另存为或再次发布成为模板。
（2）学习使用点击首页右下角学习使用按钮，可进入教学页面。
按基础篇、初级篇、中级篇、高级篇查看教学视频，也可以功能/应用详解。
（3）新建案例点击右下角新建案例或点击首页左上角帐户名进入个人页面，可以创建新的案例，进入编辑器页面。
（4）账户信息点击首页右上角帐户名可进入个人页面，查看作品，点击点击首页右上角帐户名旁边的下拉箭头可查看账户信息、充值V币和付费服务。
点击组件服务的升级按钮，可查看付费服务详情。
（5）编辑与发布逻辑作品编辑以及发布功能新增“编辑中”和“已发布”模块。
新建作品并保存后，可以在“编辑中”模块中对作品进行修改，只有在编辑页面中点击“发布”按钮后，作品才会被保存在“已发布”模块中，同时也只有发布后的作品才能获取分享链接与二维码。
值得注意的一点是，发布后的作品是无法取消发布和修改的，但“编辑中”模块里会有一个与之相对应的作品，只要对其进行修改并发布就可以更新发布后的作品啦（但如果仅仅保存，“发布后”中作品的内容的是不会被更替的）三、iH5的作用四、编辑器介绍1、菜单栏（1）舞台放缩：“放缩”用于放缩舞台的显示大小。
显示比率分别可以将舞台缩放到50%、60%、70%、80%、90%、100%、110%、120%，当舞台大于页面可现实范，围时，可以缩小舞台显示大小，查看整体效果。
iH5高级教程：H5创意展示,上下对切特效
iH5高级教程：H5创意展示，上下对切特效在手指的滑动中可以同时把上下两个容器里的图片或内容进行切换，已形成相互对切的效果。
下面我们来展示一下做出这样的效果所需要的步骤。
第一步：1、在舞台下添加一个页面。
选中舞台，在工具栏里点击页面工具，添加一个页面2、选中页面，点击工具栏里的滑动时间轴工具，在舞台上画出一个矩形，添加一个滑动时间轴。
3、在滑动时间轴下添加两个透明按钮，作为存放图片的容器，分别命名为上层容器和下层容器。
选中滑动时间轴1，点击工具栏下的透明按钮工具，在舞台的上方画出一个矩形，添加透明按钮，命名为上层容器。
选中滑动时间轴1，点击工具栏下的透明按钮工具，在舞台的下方画出一个矩形，命名为下层容器，这两个透明按钮容器用来固定图片的位置。
4、在两个透明按钮的属性设置中，剪切设置为YES 。
第二步：1、在上层容器和下层容器中，各添加若干张图片。
选中上层容器对象，点击工具栏里的图片工具，在上层容器框中画出一个矩形，添加图片。
选中下层容器对象，点击工具栏里的图片工具，在下层容器框中画出一个矩形，添加图片。
2、在每张图片下，各添加一个轨迹。
选中图片上3对象，点击工具栏里的轨迹工具，添加轨迹，如此类推，每一张图片都给它一个轨迹。
第三步：1、在轨迹上面添加特定的关键帧。
点击Add按钮，即可在轨迹上添加关键帧。
以图下3和图上3为例。
首先设定它们在轨迹上的初始位置，一般的初始位置是定在容器的外面，以滑动的方式进入容器，而第二个关键帧就是图片完全进去容器后的位置，一般设置图片的位置跟容器的位置一样就行。
图上3的运动：图片进去容器前：图片进去容器中：图片进去容器后：图下3的运动：图片进入容器前：图片进入容器中：图片进入容器后：2、而图上2和图下2，图上1和图下1，同理也可以在滑动时间轴上设置，上下容器的图片便可以连续连贯滑动。
注意：滑动时间轴的属性，滑动放大比例的数值设置一般为0.2到0.5，这样可以更加符合浏览的滑动节奏。
iH5高级教程：H5交互菜单,旋转菜单特效
iH5⾼级教程：H5交互菜单,旋转菜单特效iH5⾼级教程：H5交互菜单，旋转菜单特效步骤：第⼀步：上传图⽚1、选中舞台，点击页⾯⼯具，添加6个页⾯。
因为这个案例的主题是“2014公路”，我们将页⾯重命名为菜单、打⽼虎、世界杯、冰桶挑战、APEC蓝、终于告别。
把这五个页⾯都设置成不⼀样的背景颜⾊。
2、分别选中2、3、4、5、6页，点击图⽚⼯具，添加返回图⽚。
第⼆步：利⽤滑动时间轴制作滑动旋转1、选中“菜单”，点击滑动时间轴⼯具，在舞台上画⼀个区域，添加⼀个滑动时间轴，并设置其宽⾼为舞台⼤⼩，xy坐标为（0,0），这样可以防⽌出现别⼈在观看我们作品时出现滑动时间轴显⽰不全的问题。
2、选中滑动时间轴，点击图⽚⼯具，添加旋转背景，并为其添加轨迹。
旋转背景其实是⼀张1500*1500的图，由于舞台默认设置被剪切，所以我们看不完旋转背景的全部，只要把舞台的剪切设置为No就可以看到完整的旋转背景。
3、选中轨迹，添加控制点来设置它位置。
我们要制造旋转的效果，所以我们的控制点设置主要在与旋转。
例如第⼀点的旋转是0，第⼆点的旋转是-72，第三点的旋转是-144，第四点的旋转是-216，第五点的旋转是-288。
第三步：制作跳转页⾯1、回到控制点1的位置，将舞台剪切设置为NO，选中“旋转背景”，在相应的位置添加可以通过点击它来跳转其他页⾯的透明按钮并重命名为“打⽼虎”、“世界杯”、“冰桶挑战”、“APEC蓝”、“终别告”。
2、为了让别⼈知道牌⼦可以点，我们在这⾥添加⼀个点击提⽰圈让它不断地在闪。
选中冰桶挑战透明按钮，点击时间轴⼯具，先添加⼀个时间轴，设置为两秒，且选择⾃动播放并循环播放。
然后添加图⽚并为其在时间轴下添加轨迹。
3、做好之后可以通过复制粘贴的⽅法粘贴到别的透明按钮下。
第四步：设置跳转页⾯1、分别在5个透明按钮下的点击提⽰圈添加事件，选中提⽰圈图⽚，点击事件⼯具，触发条件设置为点击，⽬标对象设置为舞台，⽬标动作设置为跳转页⾯，页⾯分别设置为“打⽼虎”、“世界杯”、“冰桶挑战”、“APEC蓝”、“终别告”。
ih5中级教程微场景h5 横向滑动切换
iH5中级教程：微场景H5 横向滑动切换听语音|浏览：480|更新：2016-06-13 19:331234567分步阅读下面我们一起来学习一下iH5中级教程的第二节微场景H5必备，横向滑动切换方法/步骤1.选中舞台，点击工具栏页面工具，添加五个页面。
2、选中第一个页面，点击工具栏图片工具，添加窗户的背景图片3、选中页面1，点击时间轴图标添加时间轴14、（1）时间轴下添加箭头图片（2）图片下添加轨迹（3）时间轴总时长0.6秒（4）为图片添加三个关键帧，通过调整y坐标和透明度，制作箭头指示上滑页面的效果。
5、（1）页面1下添加时间轴2 （2）时间轴总时长3秒（3）选中时间轴，点击图片工具，添加人物素材（4）选中素材，点击轨迹工具，添加轨迹（5）缩小图片，透明度为0 （6）点ADD 添加关键帧（7）移动小方块到轨迹1秒的位置，调节图片透明度100 （8）把图片放大，移动到窗边的位置，点ADD添加关键帧这样就有人物从无到有出现的效果。
6、（1）时间轴2里添加两张文字图片（2）每张图片下都添加一个轨迹（3）通过设置关键帧，制作文字从两边往中间靠拢的轨迹。
1、选中第二页，点击图片工具，添加一张人物图片。
2、（1）点击时间轴图标，页面2下添加时间轴（2）选中时间轴，点击富文本工具，在舞台画一个框，在编辑框里填写一些文字。
（3）选中富文本，点击轨迹工具，添加轨迹（4）轨迹开始显示为NO（5）选中富文本，添加两个关键帧，调整透明度和位置，使文字会从无到有，从上到下出现。
1、选中页面3，点击工具栏滑动时间轴工具，在舞台上画一个区域，添加滑动时间轴，滑动时间轴与舞台一样尺寸。
2、选中滑动时间轴，点击透明按钮工具，在舞台上画一个区域，添加透明按钮，此透明按钮宽3200，高1008，是一个比舞台宽的长方形。
3、选中透明按钮，点击工具栏图片工具，添加6张食物的图片作为子对象。
6张图片平铺在透明按钮上，其中第一张图片和第六张图片是同一个食物图片。
h5和h5的交互方法
h5和h5的交互方法H5和H5的交互方法H5，即HTML5，是一种用于构建和展示网页的技术标准。
随着移动互联网的快速发展，H5在移动应用开发中扮演着重要角色。
而H5和H5之间的交互则是实现丰富页面效果和用户体验的关键。
一、H5的基本交互方法1. 事件监听：H5可以通过事件监听来实现与用户的交互。
常见的事件包括点击、滑动、拖拽等。
通过监听这些事件，可以触发相应的操作和效果，从而实现与用户的交互。
2. 表单交互：H5中的表单元素可以与用户进行交互，例如输入框、单选框、复选框等。
用户可以通过输入数据或选择选项来与页面进行交互，开发者可以通过获取表单元素的值来实现相应的功能。
3. 动画效果：H5支持通过CSS3和JavaScript来实现各种动画效果。
通过设置元素的样式属性或使用JavaScript动画库，可以实现页面的动态效果，提升用户体验。
二、H5和H5之间的交互方法1. 跨文档消息传递：H5页面可以通过postMessage方法向其他H5页面发送消息，实现页面之间的通信。
这种方法常用于不同窗口或不同域名下的页面之间的交互。
2. WebSocket通信：H5提供了WebSocket API，可以实现客户端与服务器之间的双向通信。
通过WebSocket，H5页面可以与服务器实时交互，实现更复杂的功能。
3. WebRTC技术：WebRTC是一种实时通信技术，可以在H5页面之间进行音视频通话、文件传输等。
通过WebRTC，H5页面可以实现更加丰富的交互方式。
三、H5和H5的交互实例1. 多页面通信：假设有两个H5页面，页面A和页面B，它们通过postMessage方法进行通信。
当页面A中的某个操作需要通知页面B时，可以通过postMessage方法向页面B发送消息，页面B 监听到消息后执行相应的操作。
2. 实时聊天：利用WebSocket技术，可以在H5页面之间实现实时聊天功能。
页面A和页面B可以通过WebSocket与服务器建立连接，发送和接收消息，实现即时通讯。
iH5高级教程：H5交互菜单,3D时间轴特效
iH5高级教程：H5交互菜单,3D时间轴特效iH5高级教程：H5交互菜单，3D时间轴特效在时间轴上的素材呈现3D的效果，手指在屏幕上滑动的过程中，图片以3D翻转的形式运动，超过屏幕或没有运动到屏幕中间的图片都是折叠的形式。
下面我们讲述一下在案例中的3D时间轴动画。
第一步：1、选中舞台，点击工具栏下的页面工具，添加一个页面。
2、选中页面，点击工具栏下的滑动时间轴工具，在舞台上画一个框，添加一个与舞台一样大的滑动时间轴。
滑动时间轴的总时长设置为10秒，滑动方向为上3、选中滑动时间轴，点击工具栏的下的透明按钮工具，在舞台上画出一个矩形，添加一个透明按钮，右击透明按钮对象，命名为容器。
4、选中容器透明按钮，点击工具栏下的图片工具，在舞台里画出一个矩形，添加一张高度为3425的时间线图片，右击图片对象，命名为背景一线。
5、选中容器透明按钮，点击工具栏下的轨迹工具，添加一个轨迹，右击轨迹对象，命名为辅助轨迹。
6、选中背景一线图片对象，点击工具栏下的轨迹工具，添加一个轨迹。
7、选中背景一线图片对象，点击工具栏下的图片工具，在舞台上画出一个矩形，添加一张八月的图片。
8、选中八月的图片，点击工具栏下的文本工具，在舞台中画出一个矩形，添加两个文本对象。
第二步：1、选中八月的图片，点击工具栏下的透明按钮工具，在舞台上画出一个矩形，添加一个透明按钮，右击透明按钮对象，命名为3D旋转父对象。
2、选中八月的图片，点击工具栏下的轨迹工具，添加一个轨迹。
3、选中3D旋转父对象透明按钮，点击工具栏下的透明按钮工具，在舞台上画出一个矩形，添加一个透明按钮，右击透明按钮对象，命名为3D对象。
设置的X轴旋转角度为-454、选中3D对象透明按钮，点击工具栏下的图片工具，在舞台上画出一个矩形，添加一张图片。
5、选中3D对象透明按钮，点击工具栏下的轨迹工具，添加一个轨迹。
6、选中图1，点击工具栏下的事件工具，添加一个事件。
事件的属性是通过点击相应的图片跳转到相应的介绍页面。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
重点控件：时间轴、轨迹、透明按钮、计数器、事件、剪切
重点事件：
触发对象：按钮
触发条件：手指按下
目标对象：计数器
目标动作：加1
触发对象：计数器
触发条件：为奇数
目标对象：时间轴
目标动作：从头播放
触发对象：计数器
触发条件：为偶数
目标对象：时间轴
目标动作：反向播放
TIPS：
1、舞台剪切选择YES，会剪切掉舞台范围外的子对象。此案例中可以制作圆圈放大的效果。
第四步：
1、选中页面3，点击时间轴工具 ，选中时间轴，点击透明按钮工具，添加2个透明按钮。选中透明按钮，点击轨迹 。透明按钮1负责从显示到隐藏。透明按钮3显示文字。
2、选中透明按钮3，点击中文字体工具 ，添加5个中文字体。
3、选中中文字体，点击动效工具 ，为5个中文字体各添加1个动效。触发后延时分别为0、0.05、0.1、0.15、0.2。
2、通过计数器的奇偶数，使目录时间轴播放与反向播放，同理，可以制作控制音乐开关。
8、选中目录，点击中文字体工具 ，添加5个中文字体，并制作中文字体阶梯出现的效果。
9、选中按钮，点击计数器 ，在舞台上画一个框，添加计数器。
10、点击透明按钮，在按钮图片处画一个框，选中透明按钮，添加事件工具 ，手指按下按钮，计数器加1。
11、选中计数器添加4个事件 。计数器为奇数，菜单往右移动，按钮时间轴正向播放，变成叉号。计数器为偶数时，菜单往左移动，按钮变成三行。
第三步：
1、页面2其他设置与页面1相同，下拉菜单的形式变成圆形。选中页面2，点击时间轴工具 ，添加时间轴。制作圆形慢慢放大的效果。舞台、页面属性面板剪切选NO，就可以看到舞台外的图片。
第一个关键帧：
中间环节：
第二个关键帧：
2、选中时间轴，点击透明按钮工具 ，添加透明按钮。
3、选中透明按钮，点击中文字体 ，添加5个中文字体。选中中文字体，添加轨迹。
4、选中内容，点击透明按钮工具 ，添加3个透明按钮，重命名为按钮、内容、横栏。
5、选中按钮透明按钮，点击时间轴工具 ，制作开关动画。
6、选中时间轴，点击图片工具 ，上传背景图片。选中图片，点击轨迹工具，制作背景往右移动的效果。
7、选中时间轴，点击透明按钮工具 ，重命名为目录。制作目录往右移动的效果。
iH5高级教程：H5交互菜单，下拉菜单特效
下拉菜单的三种不同，添加3个页面，每个页面制作不同的下拉菜单效果。
第二步：
1、选中页面1，点击时间轴工具 。总时长0.4秒，自动播放和循环播放为NO。
2、选中时间轴，点击透明按钮工具 ，重命名为内容。
3、选中内容透明按钮，点击轨迹工具 ，添加轨迹。点ADD添加关键帧，制作蓝色透明按钮往右移动的效果。