青銅修煉手冊:Axure圖片放大器

步驟:

1.拖放一張300*200的圖片並命名爲“小圖”。

2.拖放一個150*100的矩形(黃底黃邊),並設置【不透明度】爲30%,初始狀態設爲【隱藏】,命名爲“放大鏡”,放置在“小圖”的右下角

3.拖放一個300*200的動態面板,初始狀態設爲【隱藏】,命名爲“放大窗口”,放置在小圖右邊,並在state1面板狀態中放置一張600*400的圖片,命名爲“大圖”

 4.添加頁面載入時用例

     (1)新增一個全局變量,取名爲“enlarge”

     (2)在用例中設置全局變量“enlarge”爲大小圖寬度比例,即【大圖寬度/小圖寬度】

 5.爲“放大鏡”添加鼠標移動時的用例

(1)絕對移動“放大器”,x軸移動到【鼠標的x座標-“放大鏡”寬度的一半】,y軸移動到【鼠標的y座標-“放大鏡”高度的一半】,並且左側、右側、頂部和底部的邊界分別爲“小圖”的左側、右側、頂部和底部。

(2)絕對移動“大圖”,x軸移動到【(“小圖”左側-“放大鏡”左側)*OnLoadVariable】,y軸移動到【(“小圖”頂部-“放大鏡”頂部)*OnLoadVariable】。 

6.爲“小圖”添加鼠標移動時用例:該用例與“放大鏡”的鼠標移動時用例一樣,直接複製粘貼過來就行了

7.爲“小圖”添加鼠標移入時用例 

(1)顯示“放大鏡”

(2)顯示“放大窗口”

8.完成,點擊瀏覽一下

 原型查看效果地址:https://3je03h.axshare.com

 原型RP文件下載地址:https://download.csdn.net/download/qq_27884377/10757435

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章