上一篇，介绍了，利用拖动体例，预览图片局部细节~具体可参考以下链接；
【Axure设计：优化“图片局部放大”】今天，优化下此结果表示体例，即当鼠标移动到图片上时，展示放年夜的图片细节，具体结果如下图所示~
0Axure设计：简单的图片细节局部放年夜
文章插图
需要这些哦
Axure RP 8
方式/
1上一篇，介绍图片局部放年夜，利用了拖动体例，和本篇优化稍有收支~
0Axure设计：简单的图片细节局部放年夜
2新建一图片，导入喜好的图，定名为pic，尺寸为400*250；
（图片尺寸可自界说，展示受限百度限制）
3新建一”矩形“，定名为board，尺寸为200*125；
并设定填充颜色为#00FF00，不透明：20%；
设置为“埋没”；
置于”图片：pic”上方；
如下图所示：
文章插图
4选择“矩形：board”，“图片：pic”，组合，定名为area
5另新建一“动态面板”，定名为display，尺寸为400*250；
插入一张新图，定名为bigpic，尺寸为800*500；
设置“动态面板：display“为”埋没“；
6结构如下图所示：
文章插图
7以下别离设置”组合：area“的”鼠标移动时“和”鼠标移出时“的交互的动作~
8先是简单的”鼠标移出时“的交互动作：
---
埋没”动态面板：display“；
埋没”矩形：board“；
---
文章插图
文章插图
9”鼠标移动时“的交互动作：
文章插图
10动作1:
---
显示”动态面板：display“；
显示”矩形：board“；
---
文章插图
11动作2：
---
1.移动”矩形：board“；
2.设置移动的边界；
---
文章插图
12此中，移动设置为“达到”；
13设置X值为[[Cursor.x-Target.width/2]]，Y值为[[Cursor.y-Target.height/2]]；
如下图所示：
文章插图
文章插图
14边界以“图片：pic”上下摆布为界，并设置“图片：pic”为局部变量LVAR1；
推荐阅读
- ps如何制作透明气泡
- 手机网站设计技巧
- 平面设计图怎么设计
- ps中怎么删除组
- SiteServer CMS怎么设计表单，添加表单填写字段
- AI里怎么做布尔运算
- 自己如何室内装修设计？
- 教你设计出漂亮的公众号排版
- 桌签模板如何设计，在Word中
- 如何适配电脑端玩动物之森之优化模拟器