Axure中想要實現一個效果,就是當鼠標移動到圖片上時,展示放大的圖片細節,該怎么制作局部放大效果呢?下面我們就來看看詳細的教程。
新建一圖片,導入喜歡的圖,命名為pic,尺寸為400*250;(圖片尺寸可自定義,展示受限百度限制)
新建一”矩形“,命名為board,尺寸為200*125;并設定填充顏色為#00FF00,不透明:20%;設置為“隱藏”;置于”圖片:pic”上方;如下圖所示:
選擇“矩形:board”,“圖片:pic”,組合,命名為area
另新建一“動態面板”,命名為display,尺寸為400*250;插入一張新圖,命名為bigpic,尺寸為800*500;設置“動態面板:display“為”隱藏“;
布局如下圖所示:
以下分別設置”組合:area“的”鼠標移動時“和”鼠標移出時“的交互的動作~
先是簡單的”鼠標移出時“的交互動作:
隱藏”動態面板:display“;
隱藏”矩形:board“;
”鼠標移動時“的交互動作:
動作1:
顯示”動態面板:display“;
顯示”矩形:board“;
動作2:
移動”矩形:board“;
設置移動的界限;
其中,移動設置為“到達”;
設置X值為[[Cursor.x-Target.width/2]],Y值為[[Cursor.y-Target.height/2]];如下圖所示:
上一頁12 下一頁 閱讀全文
新聞熱點
疑難解答