昨天突發(fā)感想，教大家做了個Axure導(dǎo)航欄或廣告懸停的效果。今天我又心血來潮了，再教你們一個很實用的 ?應(yīng)用場景：

截獲鼠標(biāo)指針，做鼠標(biāo)跟隨事件。

相信不少同學(xué)都遇到過：想把鼠標(biāo)變成“手形”工具，但苦苦不得其解的時候吧？下面，是美女手把手教你做哦，（把舉例中的紅色標(biāo)尺圖替換成手就歐拉）~~~

（想感受一下應(yīng)用場景，可打開百度地圖，最右側(cè)有：“工具”-> “測距”或“標(biāo)記”功能。）

場景如下圖：

我隨意用了個標(biāo)尺圖片，代表手型。核心和關(guān)鍵就是：“頁面鼠標(biāo)移動時”，截獲鼠標(biāo)坐標(biāo)，移動內(nèi)容到鼠標(biāo)坐標(biāo)。共三步。

第一步：

1）做個矩形紅色按鈕（這個不用我教了吧？），命名為button。

2）拖個圖片，換為你想用的圖（如下面的紅色小圖片）。 再拉個矩形控件，把“移動到某處….”等說明文字寫入矩形內(nèi)。

如下圖：

3）選擇2中的倆元件，轉(zhuǎn)換為一個動態(tài)面板，命名為content。

4) ? 隱藏content動態(tài)面板，如下圖中箭頭3處。

第一步完，元件準(zhǔn)備完畢，一個是測距 button，一個動態(tài)面板content。

第二步 ：為button設(shè)置單擊事件：

如下：

1）移動動態(tài)面板content到紅色按鈕的下方對齊處，,絕對坐標(biāo)[[button.left,button.bottom]]

（為了保證每次單擊測距按鈕，標(biāo)尺都是從下面最近處跟隨鼠標(biāo)）

2）顯示content。

其中 ：1）具體步驟?如下圖： ?1->2->3->4->5->6 , 移動 ?content ?到絕對位置 ? ?x：fx ? fx設(shè)置為b.left ?b為button ? 。

點擊fx，會彈出編輯值窗口，如下圖：

先點擊下面的新增局部變量，點擊小黑三角，選元件button，簡些為b，插入變量This.left

把插入變量后，前面的0刪掉，This改為b，成 ? [[b.left]]

同樣的步驟，把 ?y：fx處設(shè)置為[[b.bottom]]

2) ?接著在用例編輯窗口的左側(cè)，選擇“顯示”，對應(yīng)勾選content。第二步完。

第三步，也是最重要的一步：

頁面下方有兩個重要事件：

1. 頁面鼠標(biāo)移動時。
2. 頁面鼠標(biāo)單擊時。

其中?1，a）在該頁面的正下方，點擊“頁面交互”選項卡，點擊最下方的“更多事件”，找到“頁面鼠標(biāo)移動時”選項, 并點擊頁面鼠標(biāo)移動時，彈出用例編輯窗。

1，b）如下1->2->3->4->5->6,設(shè)置事件為：移動content 絕對位置到[[Course.x,Course.y]]

（ x:fx,設(shè)置為Course.x。y:fx,設(shè)置為Course.y。）

其中： ?2“頁面鼠標(biāo)單擊時“事件： ?在彈出的用例編輯窗， ?選擇 ?“ 隱藏”——>勾選?“content”.

最終事件如下：

預(yù)覽或生成頁面，即可見頁面效果。

無論你的鼠標(biāo)再哪里，那個content（圖和文字）都緊跟著你。

你的鼠標(biāo)移到哪里，標(biāo)尺就實時跟到哪里。當(dāng)然了，你可把標(biāo)尺圖片換成“小手兒”，我這里“頁面鼠標(biāo)單擊”時，隱藏了content，大家還可以接著設(shè)置任何你想設(shè)置的事件，如顯示個其他的圖片，彈出個輸入對話框等等。

其實Axure能做好多效果：態(tài)面板的多狀態(tài)循環(huán)切換、加上全局變量的配合、還有 等待 定時事件，滾動到、移動到 等等等，基本能做好多好多的動效。

我做產(chǎn)品經(jīng)理快兩年，用了兩年的Axure做高保真原型，自己偷偷摸索了不少小竅門兒，但是我是個炒雞懶的女子，加上公司的產(chǎn)品和成果不敢亂往網(wǎng)絡(luò)上傳，所以很少分享和產(chǎn)品頁面相關(guān)的東西。

但我分享的絕對是實用的東西~~~

這兩天還算閑，所以發(fā)了兩篇，等有空了，我還會發(fā)~~~

有問題請留言哈，我有空一定解答。

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