快好知 kuaihz

Axure RP 8 教程:指针函数之商品图片放大

本章介绍如何使用指针函数实现鼠标区域的商品的放大,广泛应用于商品细节展示。

案例简介

鼠标进入商品图标时,商品图标呈现选中状态,同时商品图片相应改变;鼠标进入商品图片时,有绿色半透明矩形跟随鼠标移动,但是不超出商品图片范围;同时,右侧出现绿色半透明矩形所覆盖区域的放大图片;鼠标离开图片时,绿色半透明矩形放大图片消失。

案例实际效果

原件命名:

    图片(用于商品图片):GoodsImage

    图片(用于放大图片):LargeImage

    图片(用于商品图片):Areapanel

    图片(用于商品图片):ZoomInPanel

以下是详细教程,请大家慢慢食用。

Axure RP 8 教程-指针函数之商品图片放大

1. 将元件库的图像拖入到工作台,将其命名为GoodsImage,尺寸设定为(w:400   H:400)

2. 拖入动态面板,将其命名为ZoomInPanel,尺寸设定为(w:400   H:400)。

双击此面板,布置内容

在state1中,拖入一个图像,将其命名为LargeImage,尺寸设定为(w:800   H:800)

3. 拖入第二个动态面板,将其命名为Areapanel,尺寸设定为(w:200   H:200).

4. 拖入小矩形,编号命名为1,尺寸设定为(w:70   H:70)。

5. 设置1号矩形的选中状态,线条颜色为红,并且候选选中框(注意,只有编号1的矩形需要勾选,后面复制粘贴的时候后面四个取消勾选)

6. 复制粘贴五个矩形,注意后面四个矩形不勾选选中框,依次命名为“1”~“5”.

7. 为编号矩形“1”~“5”设置用例,先设置选中状态值到编号图像1值为真。

8. 再按照顺序,依次给五个图像导入图片(事先在本地准备好的五张商品图片)。

9. 编辑好五张编号图片之后,选中热区,点击更多事件选择鼠标移动时,为热区编辑用例。

10. 为热区元件的“鼠标移动时”时间添加“用例1”,设置动作“移动”动态面板“AreaPanel”绝对位置到达 {x}[[Cursor.x-Target.width/2]]   {y}[[Cursor.y-Target.height/2]]的位置;同时设置“左侧”边界“>=”[[This.right]],“右侧”边界“<=”[[this.left]],“上侧”边界“>=”[[This.top]],“下侧”边界“<=”[[This.bottom]].

设置动作“移动”动态面板“AreaPanel”绝对位置到达

{x}[[Cursor.x-Target.width/2]]  

{y}[[Cursor.y-Target.height/2]]

同时设置

“左侧”边界“>=”[[This.right]]

“右侧”边界“<=”[[This.left]]

“上侧”边界“>=”[[This.top]]

“下侧”边界“<=”[[This.bottom]]

11. 继续上一步,在同一个动作列表选择元件“LargeImage”,设置该元件“绝对位置到达” {x}[[-(a.x-This.x)*2]] {y} [[-(a.y-This.y)*2]]的位置;“a”为局部变量的名称,其内容为动态面板“AreaPanel”。

设置该元件“绝对位置到达”

{x}[[-(a.x-This.x)*2]]

{y}[[-(a.y-This.y)*2]]

选择绝对位置到达。

12. 继续为热区添加新的用例,选中新的动作“鼠标移入时”,编辑新的用例,显示两个动态面板。

13. 继续为热区添加新的用例,选中新的动作“鼠标移出时”,编辑新的用例,隐藏两个动态面板。

14. 完工后对比一下全部用例。

15. 添加图片,按照之前添加的次序添加以及准备好的图片

LargeImage里的state1里的图片

16. 设置动态面板AreaPanel为半透明绿色。

17. 收工,预览效果下。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:指针  指针词条  函数  函数词条  放大  放大词条  教程  教程词条  商品  商品词条  
原型

 Axure教程 | 移动端APP...

本分给大家分享:在Axure软件中,如何制作APP原型的底部弹框。做好后,直接修改中继器列表中的文字,即可实现想要的弹框;弹框选项的链接,也可以直接在中继器列表...(展开)

原型

 三步教你 Axure 原型变身 ...

Axure 原型变身 EXE 程序三步曲,简单快捷的小窍门。最近在研究如使用 H5 开发桌面应用,然后就在网上发现了 NW.js 这样一个好东西,然后经过一番折...(展开)

原型

 Axure RP8.0 教程:规...

本文提供了数值递增效果的Axure教程,请查收~~平时我们在浏览一些官网首页时,经常看到下面这样的数值递增效果,如下所示:此教程将为大家讲解如何实现此效果:一、...(展开)