新知榜官方账号
2023-07-04 22:30:33
在PC端,鼠标滚动缩小放大图片是我们常用的操作,所以今天作者就教大家如何在Axure中实现这个效果:鼠标滑轮向下滚动时,放大图片;鼠标滑轮向上滚动时,缩小图片;鼠标拖动时,可以移动图片到对应位置。
首先,我们需要准备一个图片,并通过交互来放大这个图片的。我们要做的操作是鼠标滚动放大图片以及鼠标拖动移动图片,那么我们需要的事件就是鼠标滚动时和鼠标拖动时,那在Axure里面就只有动态面板有这样的交互事件,所以这个效果就要用动态面板来制作。
动态面板需要有滚动效果的话,里面必须要有元件,并且高度超过动态面板的高度,所以这时我们就需要在动态面板里放置一个透明的矩形,并且调出动态面板的垂直滚动条。这时动态面板里就会出现滚动条,但是动态面板只是用于制作滚动效果,不应该出现滚动条,所以我们需要将该动态面板再次转为动态面板,外面板比内面板小,这样就可以通过外面板遮挡住内面板的滚动条,同时内面板又具备滚动效果。
最后,我们还需要两个文本标签,默认隐藏,分别用来记录图片初始的宽度和高度(最小的尺寸)。
交互制作方面,我们用移动的交互来实现鼠标拖动图片的效果;用设置尺寸的交互来实现鼠标滚动缩放图片的效果。通过比例的方式可以让图片宽和高放大同样的倍数,这样图片就不会变形。不过需要注意的是,图片放大后,动态面板内外面板没有同时放大,所以鼠标要在图片中部,即动态面板原来的尺寸范围内才能通过滚动缩放。
以上就是鼠标滚动缩放图片的全部内容了,希望对你有所帮助!
微信扫码咨询
相关工具
相关文章
推荐
阿里Accio中文版上线!一键搞定复杂采购
2025-08-19 09:13
视频“用嘴编辑”的时代来了,但钱包顶得住吗?
2025-08-15 17:59
智谱新模型GLM-4.5V全面开源,玩家们有福啦!
2025-08-12 17:56
扎心文案+AI插画=爆款!揭秘8万赞视频的制作全流程
2025-08-12 10:08
GPT-5没你想的那么好,附实测体验~
2025-08-11 11:07
一站式搞定AI绘图+视频,AI短片效率飙升的秘密在这儿!
2025-08-08 09:26
打工人新神器!10款国产AI,让你告别996!
2025-08-08 09:24
豆包视觉推理深度体验,AI也能“边看边想”了!
2025-08-08 09:19
300美元的AI男友来了!马斯克的情感生意从女友做到男友
2025-08-01 17:56
Agent智能体:2025年企业新员工,月薪仅需一度电?
2025-07-30 17:49