Axure商品詳情頁(yè)產(chǎn)品圖展示效果如何制作？來(lái)看看我們小編怎么操作
【Axure商品詳情頁(yè)產(chǎn)品圖展示效果如何制作】1、網(wǎng)上找一些圖片素材 ， 要分兩批 ， 一批大圖 ， 一批小圖(不想自己找的 ， 文末有素材附件)
2、首先拖入一個(gè)動(dòng)態(tài)面板 ， 命名為d ， 大小為387×121 ， 將小圖按照順序排列好 ， 根據(jù)美觀度自主調(diào)節(jié)圖片間距如下圖：
3、點(diǎn)進(jìn)去d的狀態(tài)1 ， 將小圖全部選中轉(zhuǎn)換為動(dòng)態(tài)面板 ， 命名為d1 ， d1展示全部的5張小圖 ， 而d則展示4張小圖 ， 如下圖：
4、在d1中拖入一個(gè)矩形框 ， 外框設(shè)置為紅色 ， 顏色設(shè)為透明 ， 如下圖：
5、將大圖放置在小圖的上方 ， 并轉(zhuǎn)換為動(dòng)態(tài)面板 ， 命名為d_big ， 如下圖：
6、給五張小圖分別命名：small_1、small_2、small_3、small_4、small_5 ， 設(shè)置鼠標(biāo)移入移出事件 ， 當(dāng)鼠標(biāo)移入時(shí) ， 設(shè)置紅色外框(命名為wk_red) ， 移動(dòng)到小圖的坐標(biāo)位置(x,y) ， 這里用到函數(shù)[[LVAR1.x]]、[[LVAR1.y]] ， 其中LVAR1代表的是元件小圖 ， 同時(shí)設(shè)置大圖根據(jù)小圖進(jìn)行狀態(tài)切換 ， 效果如下圖：
7、在小圖兩邊畫上左右箭頭 ， 點(diǎn)擊左箭頭 ， 讓d1向左移動(dòng)一定距離 ， 點(diǎn)擊右箭頭 ， 讓d1向右移動(dòng)一定距離 ， 向左距離為負(fù)值 ， 向右移動(dòng)為正值 。具體參考下圖：
8、效果預(yù)覽
二、能力提升
以下實(shí)現(xiàn)這個(gè)效果的方法 ， 并不是最簡(jiǎn)便的方法 ， 也并不是最完美的方法 ， 只是最基礎(chǔ)的方法 ， 這個(gè)實(shí)現(xiàn)方法簡(jiǎn)單易懂 ， 還有實(shí)現(xiàn)起來(lái)復(fù)雜 ， 最終效果更逼真 ， 更方便的方法 ， 這里不再做特別說(shuō)明 ， 大家下去自己研究 。ps:原型只是工作的一種手段 ， 并不需要在這上面花費(fèi)太多精力 ， 不過(guò) ， 多了解一點(diǎn)知識(shí)總是好的 。
1、先拖入一個(gè)大小為200×200的矩形框 ， 背景色設(shè)置為#666666 ， 透明度為50% ， 命名為follow_1 ， 然后按住ctrl鍵 ， 復(fù)制出三個(gè) ， 分別命名為follow_2,follow_3,follow_4 ， 如下圖：
2、在畫布空白區(qū)域 ， 按照下圖所示 ， 拖入文本框 ， 四個(gè)文本框 ， 分別命名為：follow_1_x,y ， follow_2_x,y ， follow_3_x,y ， follow_4_x,y 。
3、設(shè)置頁(yè)面載入時(shí)事件 ， 獲取follow_1~4的坐標(biāo)值 。
4、拖入動(dòng)態(tài)面板 ， 命名為j_big ， 將四張切割圖按照順序 ， 放入動(dòng)態(tài)面板中 ， 如下圖 。
5、設(shè)置鼠標(biāo)的懸停事件 ， 當(dāng)鼠標(biāo)處于不同區(qū)域時(shí) ， 顯示不同標(biāo)記的follow 。具體設(shè)置如下圖：
6、設(shè)置不同follow顯示時(shí) ， 對(duì)應(yīng)右邊圖片也跟隨變換
推薦閱讀
- 在網(wǎng)易考拉里將商品加入購(gòu)物車基礎(chǔ)操作
- vivox30pro參數(shù)配置詳情介紹 vivox30pro參數(shù)
- 1688詳情頁(yè)圖片尺寸 TB詳情頁(yè)圖片尺寸多少
- 測(cè)評(píng)性能值得入手嗎 iphone12配置參數(shù)詳情對(duì)比
- TB商品被監(jiān)管一般幾天被放出來(lái)
- 使用Axure制作出焦點(diǎn)元件具體操作步驟
- 快手商品審核不通過(guò)什么原因 快手商品老是審核不通過(guò)怎么辦
- 商品房買賣合同的注意事項(xiàng)有哪些
- 拼多多買了東西店家下架還能不能退貨 拼多多下架的商品可以退貨嗎
- 京東限購(gòu)是什么 京東以下商品為限購(gòu)商品什么意思