5星用户评价效果

实现效果:实现选择1-5星的用户评价效果;

5星评价

5星评价

实现关键思路:

1、添加Font Awesome部件;

2、从Font Awesome部件库中拖动5个星型图标,默认都为黑色;

3、在第一个星标上添加事件:鼠标悬停时,更改星标文本填充为黄色,鼠标点击时,更改星标文本填充为黄色;

4、在第二个星标上添加事件:鼠标悬停时,更改第一个和第二个星标文本填充为黄色,鼠标点击时,更改第一个和第二个星标文本填充为黄色;

5、在第三个星标上添加事件:鼠标悬停时,更改第一个、第二个和第三个星标文本填充为黄色,鼠标点击时,更改第一个、第二个和第三个星标文本填充为黄色;

6、以此类推,在第五个星标上也添加以上两个事件。

演示地址:http://www.jmfans.com/example/wxpj/index.html

演示和原型下载请到QQ群下载:374358071,欢迎关注微信公众号:justinmind.

原文链接:,转发请注明来源!

发表评论

要发表评论,您必须先登录