Axure怎么制作圖片局部放大的效果?

Axure中想要實現(xiàn)一個效果,就是當(dāng)鼠標(biāo)移動到圖片上時,展示放大的圖片細(xì)節(jié),該怎么制作局部放大效果呢?下面我們就來看看詳細(xì)的教程。

原型設(shè)計工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊碼+安裝教程)
- 類型:輔助設(shè)計
- 大?。?/span>90.5MB
- 語言:簡體中文
- 時間:2018-05-24
新建一圖片,導(dǎo)入喜歡的圖,命名為pic,尺寸為400*250;(圖片尺寸可自定義,展示受限百度限制)
新建一”矩形“,命名為board,尺寸為200*125;并設(shè)定填充顏色為#00FF00,不透明:20%;設(shè)置為“隱藏”;置于”圖片:pic”上方;如下圖所示:
選擇“矩形:board”,“圖片:pic”,組合,命名為area
另新建一“動態(tài)面板”,命名為display,尺寸為400*250;插入一張新圖,命名為bigpic,尺寸為800*500;設(shè)置“動態(tài)面板:display“為”隱藏“;
布局如下圖所示:
以下分別設(shè)置”組合:area“的”鼠標(biāo)移動時“和”鼠標(biāo)移出時“的交互的動作~
先是簡單的”鼠標(biāo)移出時“的交互動作:
隱藏”動態(tài)面板:display“;
隱藏”矩形:board“;
”鼠標(biāo)移動時“的交互動作:
動作1:
顯示”動態(tài)面板:display“;
顯示”矩形:board“;
動作2:
移動”矩形:board“;
設(shè)置移動的界限;
其中,移動設(shè)置為“到達(dá)”;
設(shè)置X值為[[Cursor.x-Target.width/2]],Y值為[[Cursor.y-Target.height/2]];如下圖所示:
相關(guān)文章
- Axure圖片顯示不完整或扭曲該怎么解決?Axure中插入的圖片發(fā)現(xiàn)只顯示上半部分,其他的不顯示,該怎么解決呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-12-02
- Axure8背景圖片怎么自定義設(shè)置?Axure8中默認(rèn)的背景不喜歡,想要更換一張漂亮的圖片,該怎么更換呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-09-21
- Axure8怎么將所有頁面導(dǎo)出為圖片?Axure8中設(shè)計的頁面想要全部導(dǎo)出為圖片,該怎么導(dǎo)出呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-09-17
- Axure8原型怎么導(dǎo)出為index圖片?Axure8中制作的網(wǎng)頁模型想要導(dǎo)出為index圖片,方便沒有axure的朋友查看,該怎么操作呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考2018-09-10
- Axure圖片交互樣式有哪些?Axure中圖片交互樣式種類挺多的,今天我們就來一一介紹關(guān)于圖片交互樣式的簡單知識,需要的朋友可以參考下2018-06-19
- Axure RP 8怎么設(shè)置點擊事件改變圖片?Axure RP 8中想要實現(xiàn)鼠標(biāo)在不同狀態(tài)顯示不同的圖片,該怎么實現(xiàn)呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-01-23
- Axure RP 8怎么使用按鈕控制圖片的顯示或隱藏?Axure中想要制作單擊按鈕觸發(fā)圖片顯示出來的效果,該怎么制作呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-01-15
- Axure怎么給圖片增加點擊事件?Axure中想要給圖片添加鼠標(biāo)單擊事件,如果鼠標(biāo)單擊圖片返回主頁,該怎么實現(xiàn)這個效果呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2017-11-01
Axure怎么使用動態(tài)面板制作banner圖片輪播?
Axure怎么使用動態(tài)面板制作banner圖片輪播?Axure中想要做一個網(wǎng)站banner圖片輪播,該怎么制作這個效果呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2017-06-30- axure怎么制作圖片自動播放的效果?axure中想要制作一個圖片自動播放的效果,該怎么設(shè)計呢?下面我們就來看看詳細(xì)的教程,很簡單,需要的朋友可以參考下2017-05-05