整个小案例耗时大概在1个小时，对于动态面板也有了些新的认识。

最近耳机前面的3.5mm接头被弄断，为了修好耳机，在淘宝上选接头的时候，“发现”鼠标在移动到图片上可以放大图片细节。如图：

以前看着也没什么感觉，现在正好在学习axure，就想着看能不能实现这个效果；做下来整个小案例耗时大概在1个小时，对于动态面板也有了些新的认识。

预期实现功能

1. 鼠标在小图上移动，获取固定范围内的高清大图；
2. 放大的范围不能超出图片本身的边界。

思路整理

根据要实现的功能，并参考上面的图，分析我们需要准备的元件如下：

1. 一张较小的原图origin；
2. 一张长宽同比例放大的高清大图tripleImg。由于只需要模拟，这里用了张固定3倍大小的图；
3. 一个可以挪动的正方形框zoomSquare：模拟一个放大镜。

动作分析：

（1）放大镜的挪动

• 涉及到图形的移动，初步分析需要用到动态面板
• 无法与上面效果完全一样，仅靠移动鼠标就能达到效果
• 查看动态面板支持的事件，找到能够实现我们要求的动作——“拖动时”

（2）大图tripleImg的展示

• zoomSquare挪动的时候，大图只显示出对应的部分，可以使用动态面板实现，并注意不要选择自动调整为内容尺寸。
• 在为了配合展示对应的部分，大图需要进行同比例的相对移动，比如当放大镜zoomSquare在向右移动时，我们的高清图在向左移动，将需要展示的部分放置于动态面板处。

主要界面