Axure教程——鼠标滚动缩放图片

新知榜官方账号

2023-07-04 22:30:33

Axure教程——鼠标滚动缩放图片

在PC端,鼠标滚动缩小放大图片是我们常用的操作,所以今天作者就教大家如何在Axure中实现这个效果:鼠标滑轮向下滚动时,放大图片;鼠标滑轮向上滚动时,缩小图片;鼠标拖动时,可以移动图片到对应位置。

首先,我们需要准备一个图片,并通过交互来放大这个图片的。我们要做的操作是鼠标滚动放大图片以及鼠标拖动移动图片,那么我们需要的事件就是鼠标滚动时和鼠标拖动时,那在Axure里面就只有动态面板有这样的交互事件,所以这个效果就要用动态面板来制作。

动态面板需要有滚动效果的话,里面必须要有元件,并且高度超过动态面板的高度,所以这时我们就需要在动态面板里放置一个透明的矩形,并且调出动态面板的垂直滚动条。这时动态面板里就会出现滚动条,但是动态面板只是用于制作滚动效果,不应该出现滚动条,所以我们需要将该动态面板再次转为动态面板,外面板比内面板小,这样就可以通过外面板遮挡住内面板的滚动条,同时内面板又具备滚动效果。

最后,我们还需要两个文本标签,默认隐藏,分别用来记录图片初始的宽度和高度(最小的尺寸)。

交互制作方面,我们用移动的交互来实现鼠标拖动图片的效果;用设置尺寸的交互来实现鼠标滚动缩放图片的效果。通过比例的方式可以让图片宽和高放大同样的倍数,这样图片就不会变形。不过需要注意的是,图片放大后,动态面板内外面板没有同时放大,所以鼠标要在图片中部,即动态面板原来的尺寸范围内才能通过滚动缩放。

以上就是鼠标滚动缩放图片的全部内容了,希望对你有所帮助!

本页网址:https://www.xinzhibang.net/article_detail-5527.html

寻求报道,请 点击这里 微信扫码咨询

关键词

Axure 教程 鼠标滚动 缩放 图片 高保真原型

分享至微信: 微信扫码阅读

相关工具

相关文章