<cite id="vhht5"><video id="vhht5"></video></cite><var id="vhht5"></var>
<cite id="vhht5"></cite>
<var id="vhht5"><strike id="vhht5"></strike></var>
<var id="vhht5"></var>
<var id="vhht5"><video id="vhht5"><thead id="vhht5"></thead></video></var>
<var id="vhht5"><video id="vhht5"><thead id="vhht5"></thead></video></var>
<ins id="vhht5"><span id="vhht5"><var id="vhht5"></var></span></ins><var id="vhht5"><strike id="vhht5"></strike></var>
<var id="vhht5"></var><var id="vhht5"></var><cite id="vhht5"><video id="vhht5"></video></cite><cite id="vhht5"><span id="vhht5"></span></cite>
<var id="vhht5"></var>
<cite id="vhht5"></cite>
<cite id="vhht5"><span id="vhht5"></span></cite>
您的位置: 首頁 > 軟件教程 > Axure > Axure如何制作商品詳情頁產品圖展示效果?

Axure如何制作商品詳情頁產品圖展示效果?

6.0分
出處:3lian.com 時間:2018-04-20

您可能感興趣的話題: Axure  

核心提示:Axure如何制作商品詳情頁產品圖展示效果?你怎么看?

   1、打開Axure做好工作準備

   2、首先拖入一個動態面板,命名為d,大小為387×121,將小圖按照順序排列好,根據美觀度自主調節圖片間距如下圖:

Axure如何制作商品詳情頁產品圖展示效果?

  3、點進去d的狀態1,將小圖全部選中轉換為動態面板,命名為d1,d1展示全部的5張小圖,而d則展示4張小圖,如下圖:

Axure如何制作商品詳情頁產品圖展示效果?

  4、在d1中拖入一個矩形框,外框設置為紅色,顏色設為透明,如下圖:

Axure如何制作商品詳情頁產品圖展示效果?

  5、將大圖放置在小圖的上方,并轉換為動態面板,命名為d_big,如下圖:

Axure如何制作商品詳情頁產品圖展示效果?

  6、給五張小圖分別命名:small_1、small_2、small_3、small_4、small_5,設置鼠標移入移出事件,當鼠標移入時,設置紅色外框(命名為wk_red),移動到小圖的坐標位置(x,y),這里用到函數[[LVAR1.x]]、[[LVAR1.y]],其中LVAR1代表的是元件小圖,同時設置大圖根據小圖進行狀態切換,效果如下圖:

Axure如何制作商品詳情頁產品圖展示效果?

  7、在小圖兩邊畫上左右箭頭,點擊左箭頭,讓d1向左移動一定距離,點擊右箭頭,讓d1向右移動一定距離,向左距離為負值,向右移動為正值。具體參考下圖:

Axure如何制作商品詳情頁產品圖展示效果?

  8、效果預覽

Axure如何制作商品詳情頁產品圖展示效果?

網友評論
精品軟件課程
更多 >
快播播放器(Qvod Player)是一款基... [詳細]
360安全衛士是當前功能最強、效果最好、最受... [詳細]
會聲會影(Corel VideoStudio... [詳細]
騰訊QQ支持在線聊天、視頻電話、點對點斷點續... [詳細]
搜狗拼音輸入法是網上最流行、功能最強大的拼音... [詳細]
Windows 7 是由微軟公司開發的,具有... [詳細]
快乐时时开奖查询