国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

1.準(zhǔn)備工作

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

準(zhǔn)備工作暫時告一段落。

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

2.添加放大鏡

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

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

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

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

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

• 右鍵放大鏡，選擇隱藏

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

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

3.添加放大圖

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

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

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

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

完事具備，趕快預(yù)覽去吧！

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

原型預(yù)覽：http://fvh0oa.axshare.com

作者提供源：

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

人人官方源：

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

本文由 @Lprecious? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。