全景容器组件图文教程

视频教程：网页视频http://v.youku.com/v_show/id_XMzI2MjIzNTA2OA==.html?spm=a2hzp.8253869.0.0
百度云盘：https://pan.baidu.com/share/init?surl=gf0DZKf        密码:8qf0
H5工具网址：http://www.epub360.com/
全景容器组件，可以将长宽比例为2:1的画面，以Y轴为中心轴，使画面首尾相连，360°旋转查看，目前已有该组件案例供大家参考。全景组件可实现的效果

扫码体验

付费用户可以拷贝该作品模板，地址链接http://www.epub360.com/manage/book/xpooaa/present/。
一、全景组件结构解析
全景容器组件我们简单将其结构拆为三个层级结构：
1.最外层元素／背景
2.中层元素／背景
3.最内层元素（交互元素放置层，简称：交互层）
最外层元素／背景是由全景容器组件最外层的图片元素层组成，在手机上观看时，距离我们的视线最远；
中层元素／背景是由全景容器组件中层的图片元素层组成在手机上观看时，相比最外层背景，距离视线较近，处于最内层与最外层中间。
最内层元素，在手机上观看时，相比最外层背景，距离视线最近；一般我们用一个layer页面来做这一层，可以在这一层做一些交互触发的设置。

可以使用最外层背景（2:1图）作为全景容器本身的背景，也可使用中层背景（2:1图），也可以直接用页面作为全景容器的背景（普通满屏尺寸740X1136分辨率72dpi）。
举例为大家说明下三层背景的格式该怎样设置： 
1.如想要让最外层背景可见，至少中层背景不能是JPG格式的，可以是PNG格式的带有透明区域的图片，同时，layer层内也不能放置尺寸比例2:1的JPG格式大图，否则会
二、相关尺寸规范：默认的大背景尺寸比例为2:1，所有的元素其他的小型元素都是在PS中设计好后逐个导出。大图的尺寸因为相对较大，但还是要控制下大小，尽可能压缩在200KB以内。
三、将所有的元素或者大图在PS等设计软件中完成将元素在PS等设计软件中设计排版完成后逐个导出PNG或JPG后，再上传到Epub360编辑器设置。PS中的设计示例如图：

只要保证每个小的元素跟大背景的比例正常即可，所有零散的PNG图片都是放在全景容器的layer层里。如图：
也可以将多个小元素放在一张PNG大图（尺寸比例2:1）上导出，作为单独的一层，放在中层背景或Layer层里，看个人的需求。小技巧：层次之间在滑动屏幕时，会产生错位视觉差效果，做的层次越多，视觉差效果越丰富。四、在哪里添加设置？
1.高级组件——交互组件——全景容器
2.点击全景容器添加组件

3.点击使用中层背景图片和使用外层背景图片可以替换尺寸比例为2:1的图片素材注：以下背景层暂时仅支持组件为图片容器；也可以不勾选某一层图片。

点击上图中任意一层背景图，会显示素材上传界面，仅支持上传JPG／PNG格式的图片。
4.点击Layer层设置，可直接切换到layer中去添加或修改素材

点击后进入到Layer中的排版效果如图：
五、Layer交互层设置用户最关心的问题在全景容器中进行一些交互设置，一般主要就是在Layer层（最内层）中进行的。设置方式：一般是用Layer层里的元素来触发显示一些元素，用于显示的元素可以放在Masterpage页面、页面、或者直接放在当前Layer页面。
1.一般优先选择放在Masterpage页面
2.其次选择放在页面
3.或者直接放在当前Layer页面并且将这些元素全部初始隐藏，当点击或者手势放在layer中的某个元素上面时，去触发隐藏元素的显示，分两步为大家讲解：在这里，我将元素放在了Masterpage
（一）将需要被触发的元素（图片／文字／layer容器／幻灯／序列帧等）放在Masterpage或者页面中，初始隐藏。
（二）给layer中的元素设置触发器，点击时显示Masterpage指定元素
如果既使用了外层背景，又使用了中层背景，那么中层背景一定要是PNG格式，保证部分区域是透明的，这样才可以使得最外层区域可见。
最后，因为全景容器的划动跟页面划动有些冲突，建议给页面分组（页面分组教程链接http://support.epub360.com/hc/kb/article/146611/）来解决这个问题。可以防止两个页面间的滑动冲突。