中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

那接下來(lái)我們就開(kāi)始制作吧。

一、制作材料和思路分析

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

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

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

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

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

動(dòng)態(tài)面板里面的透明矩形的高度，我們可以自由設(shè)置，因?yàn)楹罄m(xù)我們會(huì)通過(guò)scrollY函數(shù)，這個(gè)函數(shù)可以獲取動(dòng)態(tài)面板垂直滾動(dòng)的距離，那么我們?cè)俑鶕?jù)動(dòng)態(tài)面板的滾動(dòng)的矩形來(lái)設(shè)置圖片的大小。

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

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

二、交互制作

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

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

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

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

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

設(shè)置完寬度，我們?cè)賮?lái)看高度，高度就簡(jiǎn)單一點(diǎn)，就是圖片初始的高度加上滾動(dòng)的距離，例如圖片高度是300，滾動(dòng)了600，所以圖片的高度就變成300+600=900。

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

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

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

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