[ 2017-02-02 ] 图片预览功能近期上线!

新增图片预览功能,新功能是一种触发行为,满足大家更灵活的设置需求。

新增图片预览功能,新功能是一种触发行为,满足大家更灵活的设置需求。

 

1、上线时间:近期上线

 

图片预览触发器可选择图片组件、幻灯、序列帧、拼图、相册组件进行图片预览

 

 

触发全屏显示后具体效果:

 

双击放大图片指定区域

支持双指缩放及拖动

可切页:针对幻灯、序列帧、拼图、相册组件,可连续滑动多张图片查看

 

以上效果跟微信朋友圈中查看图片的效果类似。

 

2、场景举例

 

如给单张图片元素设置触发器——点击时,可触发幻灯组件内首张图片,弹出全屏显示,并在该全屏模式下,可连续滑动查看下一张。

 

3、新功能位置

 

在触发行为中,如图:

 

 

4、新功能具体效果

 

以单击放大一张图片为例:

 

单击还原/关闭预览

 

给图片设置触发器——点击自身时放大该图片即可,在预览该作品时,单击全屏预览,再次单击关闭预览,恢复成单击前状态。如图:

 

 

双击图片,在点击处放大2倍;再次双击,还原100%全屏预览效果

 

对单击后覆盖全屏的图片操作,连续双击该图片的某个区域,可对该指定区域放大查看,放大倍数为全屏预览图片的2倍。如图:

 

 

可拖动:放大后的图片可拖动

 

 

针对已经处于全屏预览的图片,可以对其进行拖动查看。

 

可切页:放大后可连续滑动查看多张图片

 

具体的以幻灯组件为例,当切换到当前页时触发幻灯组件自动弹出全屏预览,并且滑动该图片可以切换到下一张。

 

 

设置如下:

 

 

以上主要讲解该功能可实现的效果,可以满足多种场景的使用,根据个人需求去设置,不必拘泥于目前使用形式。

 

本次的功能更新就到这里,欢迎大家提出宝贵意见。

 


关注更多H5设计、案例、资讯

10