Axure怎么制作圖片局部放大的效果?
我要評論Axure中想要實現(xiàn)一個效果，就是當鼠標移動到圖片上時，展示放大的圖片細節(jié)，該怎么制作局部放大效果呢？下面我們就來看看詳細的教程。
新建一圖片，導入喜歡的圖，命名為pic，尺寸為400*250；（圖片尺寸可自定義，展示受限百度限制）
新建一”矩形“，命名為board，尺寸為200*125；并設定填充顏色為#00FF00，不透明：20%；設置為“隱藏”；置于”圖片：pic”上方；如下圖所示：
選擇“矩形：board”，“圖片：pic”，組合，命名為area
另新建一“動態(tài)面板”，命名為display，尺寸為400*250；插入一張新圖，命名為bigpic，尺寸為800*500；設置“動態(tài)面板：display“為”隱藏“；
布局如下圖所示：
以下分別設置”組合：area“的”鼠標移動時“和”鼠標移出時“的交互的動作~
先是簡單的”鼠標移出時“的交互動作：
隱藏”動態(tài)面板：display“；
隱藏”矩形：board“；
”鼠標移動時“的交互動作：
動作1:
顯示”動態(tài)面板：display“；
顯示”矩形：board“；
動作2：
移動”矩形：board“；
設置移動的界限；
其中，移動設置為“到達”；
設置X值為[[Cursor.x-Target.width/2]]，Y值為[[Cursor.y-Target.height/2]]；如下圖所示：
界限以“圖片：pic”上下左右為界，并設置“圖片：pic”為局部變量LVAR1；所以，
頂部大于[[LVAR1.top]]；
底部小于[[LVAR1.bottom]]；
右側小于[[LVAR1.right]]；
左側大于[[LVAR1.left]]；
動作3：移動”圖形：bigpic“；設置移動的界限；
其中，移動設置為“到達”；
設置“動態(tài)面板：board”為局部變量LVAR1，“圖片：pic”為局部變量LVAR2；所以，X值為[[(LVAR2.x-LVAR1.x)*2]]，Y值為[[(LVAR2.y-LVAR1.y)*2]]；如下圖所示：
設置“動態(tài)面板：display”為局部變量LVAR1，“圖片：bigpic”為局部變量LVAR2；所以移動的界限，
頂部大于[[LVAR1.height-LVAR2.height]]；
左側大于[[LVAR1.width-LVAR2.width]]；
恩，別看設置交互動作不多~但也挺搞腦筋的，來看看最后的效果吧。
相比，我更喜歡下面這個效果，不知看官，能實現(xiàn)嗎？（很簡單的哦~）
以上就是Axure圖片局部放大的制作方法，希望大家喜歡，請繼續(xù)關注腳本之家。
相關推薦：
Axure怎么導入本地的按鈕? Axure打開本地文件的技巧
相關文章
Axure圖片顯示不完整或扭曲該怎么解決？Axure中插入的圖片發(fā)現(xiàn)只顯示上半部分，其他的不顯示，該怎么解決呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-12-02
Axure8背景圖片怎么自定義設置？Axure8中默認的背景不喜歡，想要更換一張漂亮的圖片，該怎么更換呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-09-21
Axure8怎么將所有頁面導出為圖片？Axure8中設計的頁面想要全部導出為圖片，該怎么導出呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-09-17
Axure8原型怎么導出為index圖片？Axure8中制作的網頁模型想要導出為index圖片，方便沒有axure的朋友查看，該怎么操作呢？下面我們就來看看詳細的教程，需要的朋友可以參考2018-09-10
Axure圖片交互樣式有哪些？Axure中圖片交互樣式種類挺多的，今天我們就來一一介紹關于圖片交互樣式的簡單知識，需要的朋友可以參考下2018-06-19
Axure RP 8怎么設置點擊事件改變圖片？Axure RP 8中想要實現(xiàn)鼠標在不同狀態(tài)顯示不同的圖片，該怎么實現(xiàn)呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-23
Axure RP 8怎么使用按鈕控制圖片的顯示或隱藏？Axure中想要制作單擊按鈕觸發(fā)圖片顯示出來的效果，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-15
Axure怎么給圖片增加點擊事件？Axure中想要給圖片添加鼠標單擊事件，如果鼠標單擊圖片返回主頁，該怎么實現(xiàn)這個效果呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-11-01
Axure怎么使用動態(tài)面板制作banner圖片輪播?
Axure怎么使用動態(tài)面板制作banner圖片輪播？Axure中想要做一個網站banner圖片輪播，該怎么制作這個效果呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-06-30
axure怎么制作圖片自動播放的效果？axure中想要制作一個圖片自動播放的效果，該怎么設計呢？下面我們就來看看詳細的教程，很簡單，需要的朋友可以參考下2017-05-05
