在PC端，鼠标滚动缩小放大图片是我们常用的操作，所以今天作者就教大家如果在Axure中实现这个效果：1、鼠标滑轮向下滚动时，放大图片；2、鼠标滑轮向上滚动时，缩小图片；3、鼠标拖动时，可以移动图片到对应位置。
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
https://axhub.im/ax9/ca3dd539f46dc856/#g=1
【原型下载】
方式2：https://weidian.com/item.html?itemID=3856417707
那接下来我们就开始制作吧
一、制作材料和思路分析
首先我们要准备一个图片，后续我们就是通过交互来放大这个图片的
我们要做的操作是鼠标滚动放大图片以及鼠标拖动移动图片，那么我们需要的事件就是鼠标滚动时和鼠标拖动时，那在Axure里面就只有动态面板有这样的交互事件，所以这个效果就要用动态面板来制作。
动态面板需要有滚动效果的话，里面必须要有元件，并且高度超过动态面板的高度，所以这时我们就需要在动态面板里放置一个透明的矩形，并且调出动态面板的垂直滚动条。
这时动态面板里就会出现滚动条，但是动态面只是用于制作滚动效果，不应该出现滚动条，所以我们需要将该动态面板再次转为动态面板，外面板比内面板小，这样就可以通过外面板遮挡住内面板的滚动条，同时内面板又具备滚动效果。这里我们外面板的尺寸应该和图片一致；内面板的高和图片一致，宽可以设置大一点，直到看不到滚动条。将动态面板放在图片的上方，如下图所示：
动态面板里面的透明矩形的高度，我们可以自由设置，因为后续我们会通过scrollY函数，这个函数可以获取动态面板垂直滚动的距离，那么我们再根据动态面板的滚动的矩形来设置图片的大小。所以矩形的高度就控制了图片能够放大的极限，我们可以通过控制透明矩形的高度来控制图片的最大尺寸。
最后我们还需要两个文本标签，默认隐藏，分别用来记录图片初始的宽度和高度（最小的尺寸）。
二、交互制作
1、制作鼠标拖动图片的效果
鼠标拖动外面板时，我们用移动的交互，选择移动的对象为该动态面板和图片，选择跟随鼠标移动，这样就可以实现图片跟谁鼠标拖动的效果了
2、制作鼠标滚动缩放图片
内面板滚动时，我们用设置尺寸的交互，我们设置图片的宽度为图片初始的宽度+动态面板滑动距离和图片处置高度的比值在按照图片初始的宽度放大对应的倍数。简单来所，就是滚动了几个图片高度的距离，就放大多少被，例如图片宽高度都是300，如果动态面板里滚动了600，图片的宽度应该就变成300+300*600/300=900。
设置完宽度，我们再来看高度，高度就简单一点，就是图片初始的高度加上滚动的距离，例如图片高度是300，滚动了600，所以图片的高度就变成300+600=900
通过比例的方式可以让图片宽和高放大同样的倍数，这样图片就不会变形。
那这样我们就完成了鼠标滚动缩放图片的交互效果了，以后使用时只需替换图片，调整填写尺寸，就可自动生成了滚动缩放的效果了，是不是很方便呢？
不过做到这里的话，还存在一个小的问题，就是图片放大的时候，动态面板内外面板没有跟着同时放大，所以就是导致放大后鼠标要在图片中部，就是动态面板原来的尺寸范围内才能通过滚动缩放。不过做到这里我觉得也差不多了，如果感兴趣的同学也可以将面板按同样比例来缩放。
那以上就是用通讯录搜索案例教程的全部内容了，感谢您的阅读，我们下期见。
作者：梓贤vigo；
微信公众号：Axure高保真原型，分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容
本文由微信公众号：Axure高保真原型 授权发布，未经许可，禁止转载
