當鼠標從元件A的【上、下嘴纺、左败晴、右】方向移入時，則元件B從對應方向滑進栽渴。當鼠標從其它方向移出時尖坤，則跟隨一起移出，效果如下：
一闲擦、頁面布局
從左側元件庫拉入一個【熱區(qū)】作為鼠標觸發(fā)區(qū)域慢味，一個【矩形】作為描述B和一張【圖片A】，寬高尺寸都設置為一樣墅冷，居中對齊纯路，如下：
其次，將【描述B】設置為隱藏寞忿。
二驰唬、添加全局變量
點擊頂部導航【項目】-》【全局變量】，添加兩個變量，分別為【CursorX】和【CursorY】叫编，主要是為了作為后面獲取鼠標的坐標參數(shù)辖佣。
三、添加交互
1. 選中【熱區(qū)】搓逾，添加【鼠標移入時】事件卷谈。
2. 選擇左側【全局變量】-》【設置變量值】，勾選變量【CursorX】和【CursorY】霞篡，設置值分別為鼠標的坐標X軸【Cursor.x】和Y軸【Cursor.y】世蔗。
3. 當鼠標從觸發(fā)區(qū)域左邊緣滑入時，即鼠標坐標與左邊緣的距離為0朗兵，而與其他邊緣的距離大于0凸郑，即此距離為最小值。
因此只需要判斷【鼠標坐標】與四個【邊緣】的距離中矛市，最小值為哪一個，即從哪個邊緣移入诲祸。
利用函數(shù)【Math.abs】取絕對值來計算距離浊吏，函數(shù)【Math.min】取最小值來判斷哪一邊緣最小。
4. 假設鼠標從左邊移入救氯，添加【鼠標移入時】事件case2找田，設置元件【描述B】為顯示，動畫為【向右滑動】着憨，時間：200毫秒墩衙。
添加條件，如下：
設置第一個值為：[[Math.min(Math.abs(This.left-CursorX),Math.abs(This.right-CursorX),Math.abs(This.top-CursorY),Math.abs(This.bottom-CursorY))]]等于第二個值[[Math.abs(This.left-CursorX)]]甲抖，如下：
即左邊邊緣為最小距離時漆改，鼠標從左邊移入。
5. 同理准谚，為其他三個方向增加【鼠標移入時】事件挫剑，相關判斷條件如下：
6. 最后是，添加【鼠標移出時】的交互事件柱衔。
判斷條件原理與上面移入時一樣樊破，即鼠標從左邊移出時，設置元件【描述B】為隱藏唆铐，動畫為【向左滑動】哲戚，時間：200毫秒。
同理艾岂，其它三個移出方向的判斷條件如下：
四顺少、交互細節(jié)調整
1. 無論是鼠標移入還是移出，都必須重新設置全局變量值【CursorX】和【CursorY】為【Cursor.x】和Y軸【Cursor.y】澳盐。這種才能保證讓元件【描述B】跟隨鼠標的方向運動祈纯。
2. 可以發(fā)現(xiàn)令宿，上面第四個方向的交互判斷條件，我們可以省略掉腕窥，不用寫出來粒没，直接設置元件【描述B】的交互動畫。
五簇爆、預覽效果
示例下載：百度云盤
提取碼: uyag
示例演示：
歡迎大家留言評論癞松，也可以留下你期待看到的交互效果。學習更多教程可以關注本人微信公眾號：艾斯的Axure峽谷入蛆。
更多Axure原型源文件下載：我的Axure作品集
