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

本文詳細(xì)地為大家展示了如何用Axure，實(shí)現(xiàn)商品詳情頁(yè)中的放大鏡效果，enjoy~

網(wǎng)站上面已經(jīng)有一些關(guān)于放大鏡效果的文章，但敘述的不是很詳細(xì)，像我這樣的小白可能看暈，我最近剛好學(xué)習(xí)到這里，所以且嘗試把學(xué)到的盡可能詳細(xì)的敘述出來(lái)，故本文長(zhǎng)且詳細(xì)，高手請(qǐng)直接忽略本文。

先看demo預(yù)覽效果：

制作步驟

一、放置圖片和移動(dòng)的小矩形，并讓其動(dòng)起來(lái)；

二、放置高清大圖，讓圖片跟隨黃色小矩形移動(dòng)而移動(dòng)，實(shí)現(xiàn)放大鏡效果；

三、原圖下面的縮略圖點(diǎn)擊切換效果。

動(dòng)手制作

放置圖片和移動(dòng)的小矩形，并讓其動(dòng)起來(lái)

1. 按照步驟進(jìn)行，首先準(zhǔn)備一張矩形高清大圖，放入axure中，選中將圖片等比例縮小調(diào)整至合適大小(需要先計(jì)算好縮小的多少，比如我就是將900*600的圖片的寬高縮小1/2，也就是450*300px，方便后續(xù)放大鏡效果的實(shí)現(xiàn))；

2. 拖入矩形元件，取名“移動(dòng)顯示小塊”（隨意），調(diào)整透明度和大小，充當(dāng)鼠標(biāo)移動(dòng)顯示區(qū)域（該矩形元件也需要計(jì)算大小，其大小計(jì)算方式：

原高清大圖：縮小后的圖=縮小后的圖：該矩形元件），原因是下圖中左邊紅色的移動(dòng)顯示區(qū)域=右邊的紅色顯示窗口。

3. 讓移動(dòng)顯示區(qū)域動(dòng)起來(lái)，在黃色的小矩形上面加一層和圖片一樣尺寸的透明的矩形元件，取名“浮層”（原因是不加浮層，黃色小矩形不能實(shí)時(shí)的移動(dòng)）。

移動(dòng)黃色小矩形：

選中浮層，添加【鼠標(biāo)移動(dòng)時(shí)】事件，移動(dòng)黃色矩形“移動(dòng)顯示小塊”。

說(shuō)明：給浮層添加鼠標(biāo)移動(dòng)事件，【鼠標(biāo)移動(dòng)時(shí)】移動(dòng)黃色矩形為鼠標(biāo)的X軸和Y軸的位置(Cursor.X)，但是要減掉黃色矩形寬高的一半，保證鼠標(biāo)移動(dòng)時(shí)的位置就是黃色矩形的中心。

注意：事件中的Target是指黃色矩形，This指浮層。

到這一步能夠?qū)崿F(xiàn)如下效果：

設(shè)置邊界：

設(shè)置上下左右的邊界，讓黃色矩形移動(dòng)時(shí)不能超出圖片的范圍。

說(shuō)明：還是在【鼠標(biāo)移動(dòng)時(shí)】，點(diǎn)擊添加用例，需要注意的是：

a)判斷元件的top、botton、left和right時(shí)需要先添加局部變量獲取到該元件之后再用.left獲取其左邊的值，上圖中fuceng_div指浮層，move_div指黃色的小矩形。

b)判斷上下左右邊界的條件是單獨(dú)的，并且是四個(gè)if判斷條件，而非else if，在創(chuàng)建判斷后選中該用例右鍵就能將else if轉(zhuǎn)換為if判斷。

c)在判斷下邊界和右邊界時(shí)需要減去黃色矩形自身的寬度以及高度。

放置高清大圖，讓大圖片跟隨黃色小矩形移動(dòng)而移動(dòng)，實(shí)現(xiàn)放大鏡效果

進(jìn)行到這一步就已經(jīng)成功一半了，能夠?qū)崿F(xiàn)黃色的小矩形在圖片的范圍內(nèi)隨意移動(dòng)，接下來(lái)的工作就比較好辦了。

接下來(lái)放置右邊的放大鏡顯示區(qū)域，這里用一個(gè)動(dòng)態(tài)面板，里面放置最初準(zhǔn)備的高清大圖(我準(zhǔn)備的是900*600的圖片)，把圖片命名后坐標(biāo)設(shè)置為(0,0)；

實(shí)現(xiàn)思路：

黃色小矩形之于圖片就相當(dāng)于動(dòng)態(tài)面板之于面板中的高清大圖片，黃色小矩形移動(dòng)多少距離，動(dòng)態(tài)面板中的大圖片就得移動(dòng)相應(yīng)的距離乘大圖是小圖的多少倍，才能實(shí)現(xiàn)同步移動(dòng)的效果。

需要注意的是，原圖移動(dòng)的是黃色的小矩形，而動(dòng)態(tài)面板中移動(dòng)的是大圖的圖片。要實(shí)現(xiàn)同步移動(dòng)，需要計(jì)算出小矩形移動(dòng)的距離，再把大圖向負(fù)的方向移動(dòng)小矩形移動(dòng)距離的倍數(shù)。

即：大圖移動(dòng)的距離=-（小圖移動(dòng)的距離*小圖之于大圖的倍數(shù)）。

著手實(shí)現(xiàn)：

給黃色的小矩形添加【移動(dòng)時(shí)】的用例，讓小矩形移動(dòng)時(shí)，右邊動(dòng)態(tài)面板中的圖片也跟隨移動(dòng)。

用思路中的公式，計(jì)算xy的值，這里乘以2是因?yàn)榇髨D是小圖的2倍，小圖移動(dòng)一像素，大圖就得移動(dòng)兩像素：

再按照相同的公式計(jì)算出Y的值，就能實(shí)現(xiàn)如下效果：

放大鏡效果就制作完成了，接下來(lái)最后一步：

原圖下面的縮略圖點(diǎn)擊切換效果

原理：利用中繼器，存儲(chǔ)四套三種尺寸的圖片（縮略圖，正常圖，高清大圖），再把中繼器中的圖片加載到相應(yīng)的位置，然后加上點(diǎn)擊事件即可。

實(shí)現(xiàn)思路：拖放中繼器，進(jìn)入中繼器后放置一張小圖占位，再把準(zhǔn)備好四套三種尺寸的圖片依次右鍵導(dǎo)入到中繼器的數(shù)據(jù)列中，然后給中繼器加上【每項(xiàng)加載時(shí)】用例，把每列數(shù)據(jù)圖片的值加載到相應(yīng)位置，最后給占位的小圖加上點(diǎn)擊事件。

拖入中繼器，放入縮略占位小圖：

編輯好中繼器數(shù)據(jù)列名，右鍵導(dǎo)入圖片，添加每項(xiàng)加載時(shí)用例，加載出圖片。

給占位小圖添加點(diǎn)擊事件。

再給黃色小矩形和動(dòng)態(tài)面板加上移入移出效果，所有功能就實(shí)現(xiàn)完畢。

Axure源文件：https://pan.baidu.com/s/1WN-opfWcBhuBnXGZFKOYLg

提取碼：qonn

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

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