青铜修炼手册:Axure图片放大器

步骤:

1.拖放一张300*200的图片并命名为“小图”。

2.拖放一个150*100的矩形(黄底黄边),并设置【不透明度】为30%,初始状态设为【隐藏】,命名为“放大镜”,放置在“小图”的右下角

3.拖放一个300*200的动态面板,初始状态设为【隐藏】,命名为“放大窗口”,放置在小图右边,并在state1面板状态中放置一张600*400的图片,命名为“大图”

 4.添加页面载入时用例

     (1)新增一个全局变量,取名为“enlarge”

     (2)在用例中设置全局变量“enlarge”为大小图宽度比例,即【大图宽度/小图宽度】

 5.为“放大镜”添加鼠标移动时的用例

(1)绝对移动“放大器”,x轴移动到【鼠标的x坐标-“放大镜”宽度的一半】,y轴移动到【鼠标的y坐标-“放大镜”高度的一半】,并且左侧、右侧、顶部和底部的边界分别为“小图”的左侧、右侧、顶部和底部。

(2)绝对移动“大图”,x轴移动到【(“小图”左侧-“放大镜”左侧)*OnLoadVariable】,y轴移动到【(“小图”顶部-“放大镜”顶部)*OnLoadVariable】。 

6.为“小图”添加鼠标移动时用例:该用例与“放大镜”的鼠标移动时用例一样,直接复制粘贴过来就行了

7.为“小图”添加鼠标移入时用例 

(1)显示“放大镜”

(2)显示“放大窗口”

8.完成,点击浏览一下

 原型查看效果地址:https://3je03h.axshare.com

 原型RP文件下载地址:https://download.csdn.net/download/qq_27884377/10757435

猜你喜欢

转载自blog.csdn.net/qq_27884377/article/details/83616109