在PC端，鼠標(biāo)滾動縮放圖片是我們經(jīng)常會用到的操作。本文作者分享了在Axure中實現(xiàn)鼠標(biāo)滾動縮放圖片效果的教程，一起來看一下吧。

在PC端，鼠標(biāo)滾動縮小放大圖片是我們常用的操作，所以今天作者就教大家如何在Axure中實現(xiàn)這個效果：

1. 鼠標(biāo)滑輪向下滾動時，放大圖片
2. 鼠標(biāo)滑輪向上滾動時，縮小圖片
3. 鼠標(biāo)拖動時，可以移動圖片到對應(yīng)位置

原型地址：https://ye4rpj.axshare.com/#g=1

那接下來我們就開始制作吧。

一、制作材料和思路分析

首先我們要準(zhǔn)備一個圖片，后續(xù)我們就是通過交互來放大這個圖片的。

我們要做的操作是鼠標(biāo)滾動放大圖片以及鼠標(biāo)拖動移動圖片，那么我們需要的事件就是鼠標(biāo)滾動時和鼠標(biāo)拖動時，那在Axure里面就只有動態(tài)面板有這樣的交互事件，所以這個效果就要用動態(tài)面板來制作。

動態(tài)面板需要有滾動效果的話，里面必須要有元件，并且高度超過動態(tài)面板的高度，所以這時我們就需要在動態(tài)面板里放置一個透明的矩形，并且調(diào)出動態(tài)面板的垂直滾動條。

這時動態(tài)面板里就會出現(xiàn)滾動條，但是動態(tài)面只是用于制作滾動效果，不應(yīng)該出現(xiàn)滾動條，所以我們需要將該動態(tài)面板再次轉(zhuǎn)為動態(tài)面板，外面板比內(nèi)面板小，這樣就可以通過外面板遮擋住內(nèi)面板的滾動條，同時內(nèi)面板又具備滾動效果。

這里我們外面板的尺寸應(yīng)該和圖片一致；內(nèi)面板的高和圖片一致，寬可以設(shè)置大一點，直到看不到滾動條。將動態(tài)面板放在圖片的上方，如下圖所示：

動態(tài)面板里面的透明矩形的高度，我們可以自由設(shè)置，因為后續(xù)我們會通過scrollY函數(shù)，這個函數(shù)可以獲取動態(tài)面板垂直滾動的距離，那么我們再根據(jù)動態(tài)面板的滾動的矩形來設(shè)置圖片的大小。

所以矩形的高度就控制了圖片能夠放大的極限，我們可以通過控制透明矩形的高度來控制圖片的最大尺寸。

最后我們還需要兩個文本標(biāo)簽，默認隱藏，分別用來記錄圖片初始的寬度和高度（最小的尺寸）。

二、交互制作

1. 制作鼠標(biāo)拖動圖片的效果

鼠標(biāo)拖動外面板時，我們用移動的交互，選擇移動的對象為該動態(tài)面板和圖片，選擇跟隨鼠標(biāo)移動，這樣就可以實現(xiàn)圖片跟誰鼠標(biāo)拖動的效果了。

2. 制作鼠標(biāo)滾動縮放圖片

內(nèi)面板滾動時，我們用設(shè)置尺寸的交互，我們設(shè)置圖片的寬度為圖片初始的寬度+動態(tài)面板滑動距離和圖片處置高度的比值，再按照圖片初始的寬度放大對應(yīng)的倍數(shù)。

簡單來說，就是滾動了幾個圖片高度的距離，就放大多少倍，例如圖片寬高度都是300，如果動態(tài)面板里滾動了600，圖片的寬度應(yīng)該就變成300+300*600/300=900。

設(shè)置完寬度，我們再來看高度，高度就簡單一點，就是圖片初始的高度加上滾動的距離，例如圖片高度是300，滾動了600，所以圖片的高度就變成300+600=900。

通過比例的方式可以讓圖片寬和高放大同樣的倍數(shù)，這樣圖片就不會變形。

那這樣我們就完成了鼠標(biāo)滾動縮放圖片的交互效果了，以后使用時只需替換圖片，調(diào)整填寫尺寸，就可自動生成了滾動縮放的效果了，是不是很方便呢？

不過做到這里的話，還存在一個小的問題，就是圖片放大的時候，動態(tài)面板內(nèi)外面板沒有跟著同時放大，所以就是導(dǎo)致放大后鼠標(biāo)要在圖片中部，就是動態(tài)面板原來的尺寸范圍內(nèi)才能通過滾動縮放。不過做到這里我覺得也差不多了，如果感興趣的同學(xué)也可以將面板按同樣比例來縮放。

那以上就是鼠標(biāo)滾動縮放圖片的全部內(nèi)容了，感謝您的閱讀，我們下期見。