新知榜官方账号
2023-07-04 22:30:33
在PC端,鼠标滚动缩小放大图片是我们常用的操作,所以今天作者就教大家如何在Axure中实现这个效果:鼠标滑轮向下滚动时,放大图片;鼠标滑轮向上滚动时,缩小图片;鼠标拖动时,可以移动图片到对应位置。
首先,我们需要准备一个图片,并通过交互来放大这个图片的。我们要做的操作是鼠标滚动放大图片以及鼠标拖动移动图片,那么我们需要的事件就是鼠标滚动时和鼠标拖动时,那在Axure里面就只有动态面板有这样的交互事件,所以这个效果就要用动态面板来制作。
动态面板需要有滚动效果的话,里面必须要有元件,并且高度超过动态面板的高度,所以这时我们就需要在动态面板里放置一个透明的矩形,并且调出动态面板的垂直滚动条。这时动态面板里就会出现滚动条,但是动态面板只是用于制作滚动效果,不应该出现滚动条,所以我们需要将该动态面板再次转为动态面板,外面板比内面板小,这样就可以通过外面板遮挡住内面板的滚动条,同时内面板又具备滚动效果。
最后,我们还需要两个文本标签,默认隐藏,分别用来记录图片初始的宽度和高度(最小的尺寸)。
交互制作方面,我们用移动的交互来实现鼠标拖动图片的效果;用设置尺寸的交互来实现鼠标滚动缩放图片的效果。通过比例的方式可以让图片宽和高放大同样的倍数,这样图片就不会变形。不过需要注意的是,图片放大后,动态面板内外面板没有同时放大,所以鼠标要在图片中部,即动态面板原来的尺寸范围内才能通过滚动缩放。
以上就是鼠标滚动缩放图片的全部内容了,希望对你有所帮助!
相关工具
相关文章
推荐
用Deepseek写AI绘图提示词,像呼吸一样简单!
2025-02-19 16:12
你以为AI绘画是黑科技?其实早成了“路边摊生意”!
2025-02-19 10:15
Flux爆火,全网最全面最详细的Flux使用教程!
2025-02-18 14:19
用AI如何创作音乐,实战教学来啦!
2025-02-17 17:23
MidJourney让你秒变绘画大神,从零开始画哪吒!
2025-02-17 14:56
AI应用新境界:让人工智能成为你的得力助手
2025-02-14 15:45
AI短片革命:当创作遇上智能,人人都能成为导演
2025-02-14 14:53
AI狂潮下的人类职场:是失业危机还是进化契机?
2025-02-13 16:53
开启影视创作新纪元,效率提升 10 倍的神器来了!
2025-02-13 15:11
深度解析DeepSeek:当AI技术照进创作产业的未来
2025-02-12 17:16