当前位置:首页 » 新媒体运营 » 正文

wps取消鼠标滚动放大缩小,Axure教程-鼠标滚动缩放图片

4083 人参与  2022年12月10日 17:23  分类 : 新媒体运营  评论

在PC端,鼠标滚动缩放图片是我们经常会用到的操作。本文作者分享了在Axure中实现鼠标滚动缩放图片效果的教程,一起来看一下吧。

wps取消鼠标滚动放大缩小,Axure教程-鼠标滚动缩放图片-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络

在PC端,鼠标滚动缩小放大图片是我们常用的操作,所以今天作者就教大家如何在Axure中实现这个效果:

  1. 鼠标滑轮向下滚动时,放大图片

  2. 鼠标滑轮向上滚动时,缩小图片

  3. 鼠标拖动时,可以移动图片到对应位置

wps取消鼠标滚动放大缩小,Axure教程-鼠标滚动缩放图片-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络

原型地址:
https://yerpj.axshare.com/#g=

那接下来我们就开始制作吧。


一、制作材料和思路分析

首先我们要准备一个图片,后续我们就是通过交互来放大这个图片的。

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

动态面板需要有滚动效果的话,里面必须要有元件,并且高度超过动态面板的高度,所以这时我们就需要在动态面板里放置一个透明的矩形,并且调出动态面板的垂直滚动条。

这时动态面板里就会出现滚动条,但是动态面只是用于制作滚动效果,不应该出现滚动条,所以我们需要将该动态面板再次转为动态面板,外面板比内面板小,这样就可以通过外面板遮挡住内面板的滚动条,同时内面板又具备滚动效果。

这里我们外面板的尺寸应该和图片一致;内面板的高和图片一致,宽可以设置大一点,直到看不到滚动条。将动态面板放在图片的上方,如下图所示:

wps取消鼠标滚动放大缩小,Axure教程-鼠标滚动缩放图片-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络

动态面板里面的透明矩形的高度,我们可以自由设置,因为后续我们会通过scrollY函数,这个函数可以获取动态面板垂直滚动的距离,那么我们再根据动态面板的滚动的矩形来设置图片的大小。

所以矩形的高度就控制了图片能够放大的极限,我们可以通过控制透明矩形的高度来控制图片的最大尺寸。

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


二、交互制作. 制作鼠标拖动图片的效果

鼠标拖动外面板时,我们用移动的交互,选择移动的对象为该动态面板和图片,选择跟随鼠标移动,这样就可以实现图片跟谁鼠标拖动的效果了。


. 制作鼠标滚动缩放图片

内面板滚动时,我们用设置尺寸的交互,我们设置图片的宽度为图片初始的宽度+动态面板滑动距离和图片处置高度的比值,再按照图片初始的宽度放大对应的倍数。

简单来说,就是滚动了几个图片高度的距离,就放大多少倍,例如图片宽高度都是,如果动态面板里滚动了,图片的宽度应该就变成+*/=。

设置完宽度,我们再来看高度,高度就简单一点,就是图片初始的高度加上滚动的距离,例如图片高度是,滚动了,所以图片的高度就变成+=。

通过比例的方式可以让图片宽和高放大同样的倍数,这样图片就不会变形。

那这样我们就完成了鼠标滚动缩放图片的交互效果了,以后使用时只需替换图片,调整填写尺寸,就可自动生成了滚动缩放的效果了,是不是很方便呢?

不过做到这里的话,还存在一个小的问题,就是图片放大的时候,动态面板内外面板没有跟着同时放大,所以就是导致放大后鼠标要在图片中部,就是动态面板原来的尺寸范围内才能通过滚动缩放。不过做到这里我觉得也差不多了,如果感兴趣的同学也可以将面板按同样比例来缩放。

那以上就是鼠标滚动缩放图片的全部内容了,感谢您的阅读,我们下期见。

本文链接:https://www.woshiqian.com/post/170789.html

百度分享获取地址:https://share.baidu.com/code
微信公众号里鼠标位置自动缩小  

我是钱微信/QQ:5087088

广告位、广告合作QQ:5087088

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

       

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。