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

前幾天看到有人介紹了axure8的圖片放大原型設計步驟（http://www.aharts.cn/rp/246879.html），挺不錯的，可惜，我的axure目前用的不是8，還木有那么高大全，于是乎，我就想不如用現有的7.0做一做，分享給大家，且看下文步驟~

1.準備工作

• 打開Axure7.0（純屬廢話，大家這么聰明都知道的~嘻嘻~）
• 左側工具欄，拖拉出矩形框2個
• 一個矩形框設置成200*200大小，一個設置成400*400
• 兩張圖片，一張縮略圖（命名小圖），一張放大圖（命名大圖），兩張圖片最好是等比的，看著效果更佳
• 將錯略圖放到200*200的矩形框內

準備工作暫時告一段落。

看看放大圖片必要的元素還缺少些什么？嗯，就是放大鏡！Of course，也有很牛掰的不用放大鏡，鼠標放到縮略圖上就放大圖片，原理都是相同的啦，我這里放個放大鏡，方便看效果~~~~~~

2.添加放大鏡

• 左側工具欄，拖拉出矩形框一個
• 將矩形框設置成40*40大小
• 邊框設置成綠色（顏色隨你喜歡），填充設置成透明（這個必須，不然就看不到后面圖片了哦）
• 將放大鏡矩形框移動到縮略圖片上

Yeah，放大鏡制作完成，來看下預覽效果。咦？放大鏡不能移動，What’s wrong？？？？？？Calm down，還沒有給放大鏡添加動態效果。

放大鏡動畫效果：鼠標移入圖片顯示放大鏡；鼠標移出隱藏放大鏡；放大鏡跟隨鼠標移動；

• 點擊選中縮略圖
• 右側交互區添加交互事件，選擇“鼠標移入時”，顯示“放大鏡”
• 再添加交互事件，選擇“鼠標移出時”，隱藏“放大鏡”
• 在頁面交互區添加頁面交互事件，選擇“頁面鼠標移動時”，移動“放大鏡”，設置x和y距離，一定要選擇“絕對距離”（不這么做的你看看是什么效果，認真臉），添加函數即點擊fx打開變量面飯，插入函數Cursor.x和Cursor.y（為了使鼠標顯示在放大鏡中間樣子更好看，設了Cursor.x-20和Cursor.y-20，猜猜為什么是-20而不是-10或-60？就是這么調皮，啦啦啦~）

來來來預覽一下。嗯，移動可以了，但是一開始放大鏡就顯示出來了，這你逗人玩嗎？NoNoNo，忘記一步。

• 右鍵放大鏡，選擇隱藏

好了，再來預覽一下，保證是好的~如果還不行，真的不是我的問題，不是我的問題，不是我的問題！

放大鏡搞完了，還沒有放大圖，下面就來設置放大圖。

3.添加放大圖

• 左側工作區拉出一個動態面板
• 設置動態面板大小為398*398（沒設成400是為了顯示矩形邊框）
• 將動態面板（命名放大圖）放到400*400的矩形框上，居中對齊，露出矩形邊框
• 右側部件管理，點擊動態面板下的state1，添加放大圖片（演示用的1200*1200，圖片命名為大圖）

圖片放好了，那接下來就是看它怎么配合放大鏡移動。別害怕，很簡單的：

• 頁面交互區添加交互事件，選擇“頁面鼠標移動時”，移動放大圖（勾選的是“大圖”圖片，別勾選成動態面板?。。。。?/li>
• 設置移動距離x和y，再次強調選擇“絕對距離”，點擊fx添加函數式
• 新增局部變量LVAR1，選擇“部件”=小圖（縮略圖），插入函數式[[(LVAR1.left-Cursor.x+20)*5]]，同理設置y的函數式[[(LVAR1.top-Cursor.x+20)*5]]

.left代表大圖的x坐標，.top代表大圖的y坐標，Cursor.x和.y代表放大鏡當前停留位置的x和y坐標（前面設了-20，所以上面有+20）。（大圖坐標-小圖坐標）*放大倍數=當前放大圖該顯示的部分，上面函數式的*5就是圖片的放大倍數，大圖的比例最好是>=函數式上的放大倍數

完事具備，趕快預覽去吧！

寫完這些，感覺自己萌萌噠~~~~~~~~~

原型預覽：http://fvh0oa.axshare.com

作者提供源：

原型下載：http://pan.baidu.com/s/1eRd6reE ? ? 密碼：nv8y

人人官方源：

鏈接：http://pan.baidu.com/s/1pKbmik7? ?密碼：eq4h

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