Axure如何制作图片点击放大或缩小效果

 时间:2026-02-12 11:15:20

我们在浏览商品网站时,经常能看到商品图片能够放大或缩小展示。在Axure中也能简单的实现这个效果,那么,Axure如何制作图片点击放大或缩小效果呢?本文就由小编带大家了解一下,一起来看看吧~

Axure如何制作图片点击放大或缩小效果

工具/原料

Axure版本:企业版8.0.0.3338

PC电脑:Windows 7

方法/步骤

1.打开Axure,准备素材【图片】、【放大器图标】、【缩小器图标】。其中,放大与缩小的图标在Axure8.0版本中有自带,如图

Axure如何制作图片点击放大或缩小效果

2.将【放大器图标】、【缩小器图标】分别放置于图片放大前与图片放大后的中心点,然后【设置隐藏】,如图

Axure如何制作图片点击放大或缩小效果

3.设置页面的【页面载入时】事件为:将默认变量OnLoadVariable值设置为0。如图

Axure如何制作图片点击放大或缩小效果

4.设置图片的【鼠标移入时】事件1为:如果变量OnLoadVariable值为0,则显示放大图标,隐藏缩小图标。如图

Axure如何制作图片点击放大或缩小效果

5.设置【放大器图标】【鼠标单击时】事件为:将图片尺寸设置为当前大小默认尺寸的2倍大小,然后设置变量OnLoadVariable值为1。如图

Axure如何制作图片点击放大或缩小效果

6.增加设置图片的【鼠标移入时】事件2为:如果变量OnLoadVariable值为1,则显示缩小图标,隐藏放大图标。如图

Axure如何制作图片点击放大或缩小效果

7.设置【放小器图标】【鼠标单击时】事件为:将图片尺寸设置为当前大小默认尺寸,,然后设置变量OnLoadVariable值为0。如图

Axure如何制作图片点击放大或缩小效果

8.完成设置后,预览结果,实现了图片点击放大或缩小效果。如图

Axure如何制作图片点击放大或缩小效果

Axure如何制作图片点击放大或缩小效果

总结:

1.打开Axure,准备素材【图片】、【放大器图标】、【缩小器图标】;

2.将【放大器图标】、【缩小器图标】分别放置于图片放大前与图片放大后的中心点,然后【设置隐藏】;

3.设置页面的【页面载入时】事件为:将默认变量OnLoadVariable值设置为0;

4.设置图片的【鼠标移入时】事件1为:如果变量OnLoadVariable值为0,则显示放大图标,隐藏缩小图标;

5.设置【放大器图标】的【鼠标单击时】事件为:将图片尺寸设置为当前大小默认尺寸的2倍大小,然后设置变量OnLoadVariable值为1;

6.增加设置图片的【鼠标移入时】事件2为:如果变量OnLoadVariable值为1,则显示缩小图标,隐藏放大图标;

7.设置【放小器图标】的【鼠标单击时】事件为:将图片尺寸设置为当前大小默认尺寸,,然后设置变量OnLoadVariable值为0;

8.完成设置后,预览结果,实现了图片点击放大或缩小效果。

注意事项

Tips:如果想要更好的效果,还可以设置放大缩小图标随着鼠标移动位置。

  • Axure 8.0中怎么制作手机上下滑动效果
  • 使用Axure如何实现轮播图效果?
  • Axure RP 制作图片轮播
  • Axure制作文字滚动的动态效果
  • axure实现多个图片同区域左右滑动显示效果
  • 热门搜索
    桂林旅游高等专科学校 诗歌的特点 哺乳期可以吃避孕药 来月经可以同房吗 怎么办港澳通行证 塞尔达传说缩小帽攻略 手机怎么下载qq 多少岁可以考驾照 怎么祛斑有效 临时身份证多久可以拿到