在我們?yōu)g覽股市的走勢圖時，你會發(fā)現(xiàn)當(dāng)鼠標(biāo)移上去后就會顯示出數(shù)據(jù)，這種效果用Axure怎么做出來呢？

最近一個朋友問我，股市的走勢圖鼠標(biāo)移上去就顯示數(shù)據(jù)，這種效果怎么用原型做出來？就是類似如下的效果：

先睹為快：點擊預(yù)覽

教程開始：以谷歌云后臺虛擬機監(jiān)控視圖為例。

第一步：觀察規(guī)律，記錄要點

靜態(tài)：除了指示器，提示層，其他元素為靜態(tài)。

動態(tài)：

1. 指示器，X坐標(biāo)跟隨鼠標(biāo)X坐標(biāo)，Y坐標(biāo)保持不變；

2. 指示器，不能超過走勢圖范圍；

3. 提示層，X坐標(biāo)跟隨鼠標(biāo)+固定間隔，Y坐標(biāo)跟隨鼠標(biāo)；

4. 提示層，數(shù)字變化，隨指示器和曲線交匯的值變動；

第二步：繪制元素，細節(jié)略

第三步：制作指示器/提示層，隨鼠標(biāo)移動

1. 觸發(fā)區(qū)域

鼠標(biāo)進入走勢圖區(qū)域的時候才觸發(fā)，所以將走勢區(qū)域的最外層設(shè)置為透明，并置于頂層，以便觸發(fā)事件。

2. 指示器交互

設(shè)置走勢區(qū)域的鼠標(biāo)移動事件【鼠標(biāo)移動時】【指示器】【到達】鼠標(biāo)位置。

3. 提示層交互

按如上套路，設(shè)置提示層跟隨鼠標(biāo)移動。

第四步：制作提示層上的%比值，跟隨指示器變化

注：Axure沒有函數(shù)可以取曲線上的坐標(biāo)，這里簡單用隨機數(shù)代替變化 [[(Math.random()*1).toFixed(2)]]%。

內(nèi)容下載地址：

作者鏈接：https://pan.baidu.com/s/1UQoWp59DzdvqJxEYOa76Ig 密碼: wc3u

在線預(yù)覽：https://z61kjf.axshare.com

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

題圖來自Unsplash，基于CC0協(xié)議