京東，天貓，淘寶等等這些電商的商品主圖都會(huì)有放大器的功能，用戶只需要將鼠標(biāo)移到主圖上就可以將圖片放大查看細(xì)節(jié)。這種放大器方便用戶更加深入地了解圖片中的信息，從而一定程度保障了用戶對(duì)商品的知情權(quán)。這一章我就教教大家如何使用axure原型工具制作圖片放大器。
第一步：拖拉擺放好相關(guān)的控件
1、一張300X200的圖片，命名為“小圖”；
2、一個(gè)150X100的矩形，黃底黃邊，并設(shè)置不透明度為30%，初始狀態(tài)設(shè)置為隱藏，命名為“放大鏡”，放置在“小圖”的右下角；
3、一個(gè)300X200的動(dòng)態(tài)面板，初始狀態(tài)設(shè)置為隱藏，命名為“放大窗口”，放置在小圖右邊，并在state1面板狀態(tài)中放置一張600X400的圖片，命名為“大圖”。
第二步：添加頁面載入時(shí)用例
在用例中設(shè)置全局變量OnLoadVariable為【大圖寬度/小圖寬度】，即大小圖的寬度比例
第三步：為“放大器”添加鼠標(biāo)移動(dòng)時(shí)用例
用例中有兩個(gè)動(dòng)作：
1、絕對(duì)移動(dòng)“放大器”，x軸移動(dòng)到【鼠標(biāo)的x坐標(biāo)-“放大鏡”寬度的一半】，y軸移動(dòng)到【鼠標(biāo)的y坐標(biāo)-“放大鏡”高度的一半】，并且左側(cè)、右側(cè)、頂部和底部的邊界分別為“小圖”的左側(cè)、右側(cè)、頂部和底部。
2、絕對(duì)移動(dòng)“大圖”，x軸移動(dòng)到【（“小圖”左側(cè)-“放大鏡”左側(cè)）*OnLoadVariable】，y軸移動(dòng)到【（“小圖”頂部-“放大鏡”頂部）*OnLoadVariable】。
第四步：為“小圖”添加鼠標(biāo)移動(dòng)時(shí)用例
該用例與“放大鏡”的鼠標(biāo)移動(dòng)時(shí)用例一樣，直接復(fù)制過來就行
第五步：為“小圖”添加鼠標(biāo)移入時(shí)用例
用例中只有兩個(gè)動(dòng)作，一個(gè)是顯示“放大鏡”，另一個(gè)是顯示“放大窗口”。
OK，點(diǎn)擊預(yù)覽，鼠標(biāo)在圖片上移動(dòng)即可以看到效果。同時(shí)也可以隨時(shí)關(guān)注我的個(gè)人博客：http://weidublog.com，因?yàn)楣ぷ鬟^程中有很多這些axure原型設(shè)計(jì)小技巧的例子，所以我會(huì)堅(jiān)持分享下去，希望對(duì)大家有幫助，你們對(duì)我的關(guān)注就是我的動(dòng)力。
附件下載：放大器rp文件
作者：維度
轉(zhuǎn)載請(qǐng)注明出處：http://weidublog.com/index.php/2017/03/27/257/
