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

我們?cè)诠涮詫毣蛘咝〖t書等電商平臺(tái)的時(shí)候，當(dāng)我們鼠標(biāo)停留在商品大圖時(shí)會(huì)出現(xiàn)一個(gè)預(yù)覽區(qū)域，并且右側(cè)會(huì)出現(xiàn)預(yù)覽區(qū)域的放大圖片，方便我們看清商品的細(xì)節(jié)。這個(gè)就是電商平臺(tái)圖片放大預(yù)覽的效果。今天我們就一起來學(xué)習(xí)一下吧～

01 前期準(zhǔn)備

軟件：Axure 9.0

硬件：Windows/Mac電腦

思考：實(shí)現(xiàn)圖片放大預(yù)覽效果前的思考（可參考下圖）

02 教程

（1）準(zhǔn)備素材，本文以淘寶網(wǎng)為例，準(zhǔn)備3張展示圖片，左側(cè)邊距設(shè)置50，并設(shè)置圖片尺寸為500*500，左下角小圖片為3張圖片的縮小版尺寸150*150，具體布置頁(yè)面如下圖

（2）將左側(cè)3張大圖轉(zhuǎn)化為動(dòng)態(tài)面板命名為“左面板1”，并設(shè)置3個(gè)狀態(tài)，每張狀態(tài)里放一張圖片，圖片順序要與左下角小圖順序一致。具體如下圖

（3）制作一個(gè)預(yù)覽區(qū)，拉一個(gè)矩形元件命名為“預(yù)覽區(qū)”，設(shè)置尺寸200*200，并填充一個(gè)顏色，調(diào)整透明度50% 放在左側(cè)大圖上。

連同左面板1動(dòng)態(tài)面板，一起轉(zhuǎn)化成動(dòng)態(tài)面板，命名“左面板2”，進(jìn)入狀態(tài)后將矩形框預(yù)覽區(qū)設(shè)置為隱藏

（4）制作預(yù)覽區(qū)的放大區(qū)里的圖片內(nèi)容，再拉一個(gè)動(dòng)態(tài)面板命名為“右面板1”，設(shè)置3種狀態(tài)，每種狀態(tài)中放三張圖中的其中一張，順序與之前左下角小圖順序一致。對(duì)面板右鍵設(shè)置“自適應(yīng)內(nèi)容”。

重點(diǎn)：對(duì)每個(gè)狀態(tài)里的照片進(jìn)行尺寸設(shè)置，因放大區(qū)展示的是預(yù)覽區(qū)的放大圖片，即左側(cè)預(yù)覽框的尺寸/左側(cè)圖片的尺寸=右側(cè)面板的尺寸/右側(cè)圖片的尺寸，得出右側(cè)圖片尺寸：1250*1250；

（5）制作放大區(qū)展示區(qū)域，拉一個(gè)矩形元件命名“右面板2”，設(shè)置尺寸500*500，并轉(zhuǎn)化為動(dòng)態(tài)面板，將之前“右面板1”動(dòng)態(tài)面板放在“右面板2”動(dòng)態(tài)面板中，并將位置放在左面板對(duì)應(yīng)的右側(cè)位置。并默認(rèn)設(shè)置為隱藏。

（6）另外，我們需要一個(gè)動(dòng)態(tài)面板，拉取一個(gè)動(dòng)態(tài)面板命名為“循環(huán)狀態(tài)”，設(shè)置至少2個(gè)以上的狀態(tài)。保證我們的動(dòng)作能跑起來。位置隨意安放。我放在了左面板邊距上。

（7）所有素材準(zhǔn)備完畢，準(zhǔn)備進(jìn)入交互制作環(huán)節(jié)，想象一下我上面思維導(dǎo)圖提到的效果，先來實(shí)現(xiàn)第1個(gè)效果，即點(diǎn)擊左側(cè)3張小圖，“左面板2”展示對(duì)應(yīng)“左面板1”大圖內(nèi)容，同時(shí)放大區(qū)展示“右面板2”的對(duì)應(yīng)內(nèi)容。

（8）接下來實(shí)現(xiàn)第2個(gè)鼠標(biāo)移動(dòng)后的交互效果。

即鼠標(biāo)進(jìn)入大圖時(shí)展示預(yù)覽區(qū)和放大區(qū)，鼠標(biāo)移除時(shí)隱藏預(yù)覽區(qū)和放大區(qū)，點(diǎn)擊“左面板2”設(shè)置鼠標(biāo)移入時(shí)和移出時(shí)的交互。之前我們已經(jīng)設(shè)置了2者為隱藏狀態(tài)，全部完成后預(yù)覽調(diào)試效果。

（9）接下來進(jìn)入到最重要的第3個(gè)效果，即進(jìn)入左面板時(shí)展示預(yù)覽區(qū)，并在放大區(qū)展示預(yù)覽區(qū)內(nèi)圖片的放大效果。我們先讓之前創(chuàng)建的動(dòng)態(tài)面板”循環(huán)狀態(tài)“跑起來，如下圖

（10）接著對(duì)動(dòng)態(tài)面板“循環(huán)狀態(tài)”設(shè)置，狀態(tài)改變時(shí)交互，這時(shí)候需要分2步看，我們先來實(shí)現(xiàn)狀態(tài)改變時(shí)左面板預(yù)覽區(qū)可以移動(dòng)的效果，添加一個(gè)交互，選擇“狀態(tài)改變時(shí)”

（11）接下來在狀態(tài)改變時(shí)添加交互，選擇移動(dòng)交互，為的是要保證預(yù)覽區(qū)在大圖內(nèi)移動(dòng)，所以需要設(shè)置邊界。邊界即左面板區(qū)域尺寸范圍500*500

這里我們需要用到鼠標(biāo)函數(shù)cursor.x，為了保證移動(dòng)對(duì)應(yīng)到預(yù)覽區(qū)中心位置，

移動(dòng)預(yù)覽邊框，X值：[[cursor.x-左面板1的X坐標(biāo)-預(yù)覽邊框X尺寸的一半]]，Y值同理設(shè)置一樣；

我這里設(shè)置的是[[Cursor.x-150]]（因?yàn)槲业倪吘?0+預(yù)覽區(qū)整體200*200的一半100=150）

（12）最后設(shè)置移動(dòng)預(yù)覽區(qū)后放大區(qū)展示預(yù)覽區(qū)同等位置放大圖片。我們同樣需要設(shè)置移動(dòng)時(shí)右面板的邊界。主要是移動(dòng)的x值和y值如何計(jì)算

同理我們可以得出，移動(dòng)右面板2，X值：[[-（cursor.x-150）*2.5]]，Y值同理

有同學(xué)可能會(huì)疑問，為什么有一個(gè)負(fù)號(hào)，主要是為了保證位置的相對(duì)性，即預(yù)覽區(qū)往左上方移動(dòng)時(shí)，放大區(qū)其實(shí)相當(dāng)于往右下角方向移動(dòng)，這樣就能保證位置一樣。

思考題：為什么還要乘以2.5，知道答案的同學(xué)可以私信我或者在下方評(píng)論。

（13）以上步驟就全部實(shí)現(xiàn)了放大預(yù)覽區(qū)圖片的效果，我們需要不斷預(yù)覽調(diào)試，確定效果

結(jié)語

本篇文章步驟比較多，動(dòng)態(tài)面板里套著動(dòng)態(tài)面板，移動(dòng)時(shí)最重要的在于數(shù)值的計(jì)算方式上，比如：

移動(dòng)預(yù)覽邊框，X值：[[cursor.x-左面板1的X坐標(biāo)-預(yù)覽邊框X尺寸的一半]]，Y值同理；

移動(dòng)右面板2，X值：[[-（cursor.x-150）*2.5]]，Y值同理。

這些看似合理的數(shù)值下面都需要我們平時(shí)多思考，在練手的同時(shí)學(xué)習(xí)為什么設(shè)置成這樣。慢慢你就會(huì)發(fā)現(xiàn)自己越來越優(yōu)秀了。

本文由 @藍(lán)汐 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載！

題圖來自Unsplash，基于CC0協(xié)議