欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

百度經(jīng)驗(yàn)   發(fā)布時(shí)間:2018-12-06 14:29:16   作者:goodbyte01   我要評(píng)論
Axure怎么制作圖片局部放大的效果?Axure中想要制作圖片局部放大的效果,該怎么制作呢?下面我們就來(lái)看看Axure局部放大效果的制作方法,需要的朋友可以參考下

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

新建一圖片,導(dǎo)入喜歡的圖,命名為pic,尺寸為400*250;(圖片尺寸可自定義,展示受限百度限制)

新建一”矩形“,命名為board,尺寸為200*125;并設(shè)定填充顏色為#00FF00,不透明:20%;設(shè)置為“隱藏”;置于”圖片:pic”上方;如下圖所示:

選擇“矩形:board”,“圖片:pic”,組合,命名為area

另新建一“動(dòng)態(tài)面板”,命名為display,尺寸為400*250;插入一張新圖,命名為bigpic,尺寸為800*500;設(shè)置“動(dòng)態(tài)面板:display“為”隱藏“;

布局如下圖所示:

以下分別設(shè)置”組合:area“的”鼠標(biāo)移動(dòng)時(shí)“和”鼠標(biāo)移出時(shí)“的交互的動(dòng)作~

先是簡(jiǎn)單的”鼠標(biāo)移出時(shí)“的交互動(dòng)作:

隱藏”動(dòng)態(tài)面板:display“;

隱藏”矩形:board“;

鼠標(biāo)移動(dòng)時(shí)“的交互動(dòng)作:

動(dòng)作1:

顯示”動(dòng)態(tài)面板:display“;

顯示”矩形:board“;

動(dòng)作2:

移動(dòng)”矩形:board“;

設(shè)置移動(dòng)的界限;

其中,移動(dòng)設(shè)置為“到達(dá)”;

設(shè)置X值為[[Cursor.x-Target.width/2]],Y值為[[Cursor.y-Target.height/2]];如下圖所示:

界限以“圖片:pic”上下左右為界,并設(shè)置“圖片:pic”為局部變量LVAR1;所以,

頂部大于[[LVAR1.top]];

底部小于[[LVAR1.bottom]];

右側(cè)小于[[LVAR1.right]];

左側(cè)大于[[LVAR1.left]];

動(dòng)作3:移動(dòng)”圖形:bigpic“;設(shè)置移動(dòng)的界限;

其中,移動(dòng)設(shè)置為“到達(dá)”;

設(shè)置“動(dòng)態(tài)面板:board”為局部變量LVAR1,“圖片:pic”為局部變量LVAR2;所以,X值為[[(LVAR2.x-LVAR1.x)*2]],Y值為[[(LVAR2.y-LVAR1.y)*2]];如下圖所示:

設(shè)置“動(dòng)態(tài)面板:display”為局部變量LVAR1,“圖片:bigpic”為局部變量LVAR2;所以移動(dòng)的界限,

頂部大于[[LVAR1.height-LVAR2.height]];

左側(cè)大于[[LVAR1.width-LVAR2.width]];

恩,別看設(shè)置交互動(dòng)作不多~但也挺搞腦筋的,來(lái)看看最后的效果吧。

相比,我更喜歡下面這個(gè)效果,不知看官,能實(shí)現(xiàn)嗎?(很簡(jiǎn)單的哦~)

以上就是Axure圖片局部放大的制作方法,希望大家喜歡,請(qǐng)繼續(xù)關(guān)注腳本之家。

相關(guān)推薦:

Axure RP 8怎么設(shè)置樹狀菜單?

Axure RP 8怎么模擬手機(jī)界面顯示應(yīng)用圖標(biāo)的效果?

Axure怎么導(dǎo)入本地的按鈕? Axure打開本地文件的技巧

相關(guān)文章

  • Axure圖片顯示不完整或扭曲該怎么解決?

    Axure圖片顯示不完整或扭曲該怎么解決?Axure中插入的圖片發(fā)現(xiàn)只顯示上半部分,其他的不顯示,該怎么解決呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2018-12-02
  • Axure8背景圖片怎么自定義設(shè)置?

    Axure8背景圖片怎么自定義設(shè)置?Axure8中默認(rèn)的背景不喜歡,想要更換一張漂亮的圖片,該怎么更換呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2018-09-21
  • Axure8怎么將所有頁(yè)面導(dǎo)出為圖片?

    Axure8怎么將所有頁(yè)面導(dǎo)出為圖片?Axure8中設(shè)計(jì)的頁(yè)面想要全部導(dǎo)出為圖片,該怎么導(dǎo)出呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2018-09-17
  • Axure8原型怎么導(dǎo)出為index圖片?

    Axure8原型怎么導(dǎo)出為index圖片?Axure8中制作的網(wǎng)頁(yè)模型想要導(dǎo)出為index圖片,方便沒(méi)有axure的朋友查看,該怎么操作呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考
    2018-09-10
  • Axure圖片交互樣式有哪些?

    Axure圖片交互樣式有哪些?Axure中圖片交互樣式種類挺多的,今天我們就來(lái)一一介紹關(guān)于圖片交互樣式的簡(jiǎn)單知識(shí),需要的朋友可以參考下
    2018-06-19
  • Axure RP 8怎么設(shè)置點(diǎn)擊事件改變圖片?

    Axure RP 8怎么設(shè)置點(diǎn)擊事件改變圖片?Axure RP 8中想要實(shí)現(xiàn)鼠標(biāo)在不同狀態(tài)顯示不同的圖片,該怎么實(shí)現(xiàn)呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2018-01-23
  • Axure RP 8怎么使用按鈕控制圖片的顯示或隱藏?

    Axure RP 8怎么使用按鈕控制圖片的顯示或隱藏?Axure中想要制作單擊按鈕觸發(fā)圖片顯示出來(lái)的效果,該怎么制作呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2018-01-15
  • Axure怎么給圖片增加點(diǎn)擊事件?

    Axure怎么給圖片增加點(diǎn)擊事件?Axure中想要給圖片添加鼠標(biāo)單擊事件,如果鼠標(biāo)單擊圖片返回主頁(yè),該怎么實(shí)現(xiàn)這個(gè)效果呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2017-11-01
  • Axure怎么使用動(dòng)態(tài)面板制作banner圖片輪播?

    Axure怎么使用動(dòng)態(tài)面板制作banner圖片輪播?Axure中想要做一個(gè)網(wǎng)站banner圖片輪播,該怎么制作這個(gè)效果呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2017-06-30
  • axure怎么制作圖片自動(dòng)播放的效果?

    axure怎么制作圖片自動(dòng)播放的效果?axure中想要制作一個(gè)圖片自動(dòng)播放的效果,該怎么設(shè)計(jì)呢?下面我們就來(lái)看看詳細(xì)的教程,很簡(jiǎn)單,需要的朋友可以參考下
    2017-05-05

最新評(píng)論