当前位置: 首页> 营销策划

Axure教程|如何制作股市走势图的鼠标跟随效果?

发布时间:20-05-19

在我们浏览股市的走势图时,你会发现当鼠标移上去后就会显示出数据,这种效果用Axure怎么做出来呢?

最近一个朋友问我,股市的走势图鼠标移上去就显┛示数据,这☎种效果怎么用原型做出★来?就是类似如下的效果:

Γ

先睹&为快:点击预▇█览

教程开始:以谷歌云后↕台虚拟机监控视图为例。

第一步:观察规律,记录要点

静态:除了指╤Θ示器,提示层,其他元素为静态。

动态:

1. 指示器,X坐标Э―跟随鼠标X坐标,Y坐标◐保持不变;

2. 指示器,不能▉超过走势►图范围;

3. 提示层,X坐标≮≯跟随鼠标+固定间隔,Y坐标跟随鼠标;

4. 提◈示┊┋层,数字变化,随指示器和↑曲线交汇的值变Щц动;ↆ

第二步:绘制元素,细节略

第三步:制作指示器κ/提示层,随鼠标移动

1. 触发区域

鼠标进入走势图÷区域的时候才触发,所以将走势区域的最外层々设置为透明,并置于顶层,以便触发事件。

2. 指示器交互

设置走势区域的鼠标移动事件【鼠标移动时】【指示器╪】【到达Ⅷ】鼠标Ⅲ位置。

3. 提示层交互

按如上套路,设々置提示层跟随鼠标移动。

第四步:制作提示层上的%比值ↅ,跟随±指示ν器变化

注:Axure没╝有┑函数可以取曲线‥上的坐∏标,这里简单用随机数代替变化 [[(⊕Math.random()*1).to└Fixed(2∪)]]%。¨

内容下载地址:〦

作者链接:ht◙tчps://pan.bai┙du.com/s/1UQoWp59DzdvqJxEYOa76Ig 密码: w·。c3u

在线预览:https://z61◑↔↕▪kjf.axshare.com

&nbs─━p;

本文由 @陈张良 原创发布于人人都是产品经理,未经许可,禁止转载。

题▲图来自Unsplash,基于CC0协┎议

上一篇: 6个方法,快速提升“交互等待”体验
下一篇: 微商软文怎么写 到底该怎么写呢