中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

京東，天貓，淘寶等等這些電商的商品主圖都會有放大器的功能，用戶只需要將鼠標移到主圖上就可以將圖片放大查看細節。這種放大器方便用戶更加深入地了解圖片中的信息，從而一定程度保障了用戶對商品的知情權。這一章我就教教大家如何使用axure原型工具制作圖片放大器。

第一步：拖拉擺放好相關的控件

1. 一張300X200的圖片，命名為“小圖”；
2. 一個150X100的矩形，黃底黃邊，并設置不透明度為30%，初始狀態設置為隱藏，命名為“放大鏡”，放置在“小圖”的右下角；
3. 一個300X200的動態面板，初始狀態設置為隱藏，命名為“放大窗口”，放置在小圖右邊，并在state1面板狀態中放置一張600X400的圖片，命名為“大圖”。

第二步：添加頁面載入時用例

在用例中設置全局變量OnLoadVariable為【大圖寬度/小圖寬度】，即大小圖的寬度比例。

第三步：為“放大器”添加鼠標移動時用例

用例中有兩個動作：

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

2、絕對移動“大圖”，x軸移動到【（“小圖”左側-“放大鏡”左側）*OnLoadVariable】，y軸移動到【（“小圖”頂部-“放大鏡”頂部）*OnLoadVariable】。

第四步：為“小圖”添加鼠標移動時用例

該用例與“放大鏡”的鼠標移動時用例一樣，直接復制過來就行。

第五步：為“小圖”添加鼠標移入時用例

用例中只有兩個動作，一個是顯示“放大鏡”，另一個是顯示“放大窗口”。

OK，點擊預覽，鼠標在圖片上移動即可以看到效果。

在工作過程中，有很多這些axure原型設計小技巧的例子，所以我會堅持分享下去，希望對大家有幫助，你們對我的關注就是我的動力。

• 效果圖：axure原型設計之放大器
• 附件下載：放大器rp文件

作者：維度。個人博客：http://weidublog.com/

本文由 @維度 原創發布于人人都是產品經理。未經許可，禁止轉載