我的上一篇博文写到了评价分数的五星显示,这篇博文将介绍如何实现打分的效果。
首先,我们还是先分析我们想要的效果。
1.当鼠标移到星星上面的时候,当前星星以及前面的星星要亮起来,然后星星的右侧出现提示语,1星:很差,2星:比较差,3星:一般,4星:比较好,5星:很好。
2.当鼠标点击的时候,打分,这个时候当前星星以及前面的星星要亮起来,提示语也要隐藏。
3.但鼠标移开是,就显示我此前打得分数。
我这么说可能也有点不太清楚,大家可以到淘宝感受感受,也可以下载我的源码看看(http://pan.baidu.com/s/1c0ruT3q),下面直接贴代码:
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div>
<a href="javascript:click(1)"><img src="img/star.png" id="star1" onMouseOver="over(1)" onMouseOut="out(1)"/></a>
<a href="javascript:click(2)"><img src="img/star.png" id="star2" onMouseOver="over(2)" onMouseOut&