axure制作这个功能并不是很困难，至少比作者之前的小游戏容易太多了，其中唯一用到的高级功能就是函数，且都是直接使用，没有复杂的全局变量以及触发面板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
一、成果展示
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
点击我体验：点击此处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
交互说明：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
- 当鼠标移入画面中的时候显示放大区域以及放大后的结果；
- 放大区域随着用户的鼠标移动；
- 鼠标离开画面之后放大区域以及放大之后的结果同时消失；
- 放大后的结果随着鼠标变化，但是显示的区域是不变的。
二、制作方法
1. 素材准备
首先需要搜集所用到的图片，本例子中的图片可以随意找，只要能够清晰的反应放大前后的区别就可以，放大区域标注的图片直接从淘宝中进行截屏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
2. 放大显示区域的设置
放大显示区域和放大区域的大小是一致的，均设置为250*250，然后将该区域设置为动态面板。进入动态面板将其中的图片设置为500*500。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
这样基本就实现了整体布局，不过我们要的显然不是一个静止的图片，还需要让它随着放大区域的不同而发生移动。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
3. 放大区域的鼠标跟随
将放大区域命名为bfdq，然后设置其交互。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
上述条件的意思为当鼠标进入被放大区域的时候，bfdp图片坐标定位为（鼠标x坐标-62，鼠标y坐标-62）。这种设置也有一定的问题，即当该图片跟随鼠标的时候，鼠标将会失去接触被放大区域的机会，这样移动就会失效。为了保证移动的效果，再追加一条设置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
这样，该区域就会随着鼠标进行移动了，当然，这样也不行，因为根据淘宝的情况，这个区域不能够移出一定的范围，显然只允许在图片中进行移动。所以设置一下其边界条件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
这样，该放大区域随着鼠标进行移动的设定就完成了，这个时候，只要移动鼠标，该区域就会随着鼠标进行移动了，且不会离开图片所在的区域。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
4. 放大结果的显示
上面的设置虽然已经完成了放大区域的鼠标跟随，但是放大结果还是不会发生变化的。为了实现放大结果的变化，我们需要理解放大结果究竟是什么。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
放大结果是在固定的区域显示的，所以动态面板的使用必不可少。其次，放大结果是随着放大区域的改变而改变的。所以放大结果的图片坐标，是放大区域所在位置的函数，这样我们就可以进行设置了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
设置的方法十分简单，如上所示，即让放大结果成为放大区域坐标的函数就可以了，其中LVAR1这个局部变量指代的就是放大区域。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
5. 元素的隐藏
事实上，现在已经可以实现效果了，但是放大区域以及放大结果是一直存在的，这样显然和淘宝的情况是不符合的，所以我们将其全部隐藏起来。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
那么什么时间显示呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
当然是鼠标移动进入图片的时候了，当然，如果鼠标再次离开图片我们应该让这些区域再一次变化为隐藏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
这样就可以实现以上的所有效果了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
总结
通过上面的方法，我们成功制作了一个放大镜的效果，这个案例的主要操作要点在于放大区域和放大结果的鼠标跟随，所以重难点就是鼠标坐标有关函数的使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html
希望大家能够有所收获，该实例还是比较有用的， 在很多网页中都可以用作商品展示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4056.html