Axure10分制评分效果之分数随鼠标移动而改变

上篇文章中实现的10分制评分效果，因为是把一张心形图片切成两部分，对应只能显示例如1、1.5、2、2.5......这样的分数效果；这次利用元件的设置尺寸动作实现分数值随着鼠标移动而不断改变的效果。

显示效果

• 步骤：

1. 拖入颜色不同的两种星形图片，之后将元件形状转换为星形即可，并将表示选中状态的图片转换为动态面板。这里我设置每一个星形的宽和高均为30px的矩形，动态面板的宽为1px,x值与最左边星形的x值相同；bg文本输入框的宽和高分别为150px,30px,x和y值与最左边星形的值相同；分数文本输入框位于星形右边，用于显示分数。

   
   
   

   所需元件
   
   
   

   动态面板中星形的颜色
2. 在页面中选中bg文本输入框，分别设置鼠标移动事件，鼠标移除事件和鼠标单击事件。
   
   

   三个事件设置概览
   
   ** 鼠标移动事件：当鼠标单击事件触发时，说明已经评分，将动态面板中的选中状态文本输入框的选中状态置为true,当未单击时，设置动态面板的尺寸，其实就是选中星形起始位置到鼠标所在位置的距离，距离长度为[[(Cursor.x-bg.left)]]，设置方式如下：
   
   

   设置尺寸
   
   点击宽后面的fx函数，宽的设置如下：
   
   

   鼠标的位置减去bg文本输入框左边的位置即为选中的星形的长度
   
   同理，设置星形选中后显示的分数值，用选中的星形的长度除以15，对计算的结果保留一位小数，就是分数值。除以15是因为星形的总长度为150px,而分数总共为10分。一分的长度就是10除以150为十五分之一。
   
   

   分数的设置
   
   ** 鼠标移出事件：鼠标移出时，如果没有触发单击事件，设置动态面板尺寸为初始尺寸的宽和高，分数文本输入框为空。

3. 重新评分矩形框添加鼠标点击事件。置动态面板尺寸为初始尺寸的宽和高，分数文本输入框为空，动态面板中的选中状态文本输入框的选中状态置为false。

   
   
   

   重新评分事件设置
4. 完成。