类似于百度文库评分--点亮五角星效果
使用jQuery+CSS实现效果，效果图如下：
详细的实现过程：
1.首先需要下载jQuery，本文使用的是jquery-ui-1.9.2.custom
2.定义Html结构，确定数字、五角星、文字的位置
View Code
1 <div class="estimateLevel estimateLevel0">4.5</div> 2 <ul id="stars" class="stars"> 3 <li class="star-empty"></li> 4 <li class="star-empty"></li> 5 <li class="star-empty"></li> 6 <li class="star-empty"></li> 7 <li class="star-empty"></li> 8 <small class="estimateLevel estimateLevel1">很差</small> 9 <small class="estimateLevel estimateLevel2">较差</small> 10 <small class="estimateLevel estimateLevel3">还行</small> 11 <small class="estimateLevel estimateLevel4">推荐</small> 12 <small class="estimateLevel estimateLevel5">力荐</small> 13 </ul>
3.添加CSS样式，五角星未被选中的样式、选中的样式、选中一半的样式
View Code
1 .star-empty 2 { 3 cursor:pointer; 4 background:url(image/stars_a56d9b9d.png) no-repeat -42px 0; 5 width:18px; 6 height:20px; 7 } 8 .star-full 9 { 10 cursor:pointer; 11 background:url(image/stars_a56d9b9d.png) no-repeat 0 0; 12 width:18px; 13 height:20px; 14 } 15 .star-harf 16 { 17 cursor:pointer; 18 background:url(image/stars_a56d9b9d.png) no-repeat -21px 0; 19 width:18px; 20 height:20px; 21 }
4.添加CSS样式，调整整体位置，使看起来美观
View Code
1 .estimateLevel0 2 { 3 top:5px; 4 left:17px; 5 float:left; 6 display:inline-block; 7 position:relative; 8 color: #F7A600; 9 font-style: italic; 10 font-weight: bold; 11 font-size: 28px; 12 } 13 //使五角星排成一行 14 ul#stars 15 { 16 float:left; 17 display:inline-block; 18 list-style-type:none; 19 position:relative; 20 } 21 ul#stars li 22 { 23 float:left; 24 position:relative; 25 } 26 .estimateLevel 27 { 28 margin:3px; 29 padding:2px; 30 width:18px; 31 height:20px; 32 }
5.添加jQuery控制五角星的现实，首先隐藏所有的文字hide()，当鼠标移到相应五角星的位置时在显示文字show()，显示相应的五角星,使用hover(),当获取鼠标时添加CSS样式addClass('star-full')，当鼠标离开时移除CSS样式removeClass('star-full')
View Code
1 $('.estimateLevel1').hide(); 2 $('.estimateLevel2').hide(); 3 $('.estimateLevel3').hide(); 4 $('.estimateLevel4').hide(); 5 $('.estimateLevel5').hide(); 6 7 $('ul#stars li').hover( 8 function () { 9 if (float == 0) { 10 linkIndex = $('ul#stars li').index(this); 11 12 for (var i = 0; i <= linkIndex + 1; i++) { 13 $("ul li:nth-child(" + i + ")").addClass('star-full'); 14 } 15 if (linkIndex == 0) { 16 $('.estimateLevel1').show(); 17 } 18 if (linkIndex == 1) { 19 $('.estimateLevel2').show(); 20 } 21 if (linkIndex == 2) { 22 $('.estimateLevel3').show(); 23 } 24 if (linkIndex == 3) { 25 $('.estimateLevel4').show(); 26 } 27 if (linkIndex == 4) { 28 $('.estimateLevel5').show(); 29 } 30 } 31 }, 32 function () { 33 if (float == 0) { 34 for (var i = 0; i <= linkIndex+1; i++) { 35 $("ul li:nth-child(" + i + ")").removeClass('star-full'); 36 $("ul li:nth-child(" + i + ")").removeClass('star-harf'); 37 } 38 } 39 $('.estimateLevel1').hide(); 40 $('.estimateLevel2').hide(); 41 $('.estimateLevel3').hide(); 42 $('.estimateLevel4').hide(); 43 $('.estimateLevel5').hide(); 44 } 45 );
现在已经可以跟随鼠标的移动显示五角星了，但是这并不是百度文库的业务，在百度文库显示时，默认显示的是已经评价的结果，当获取鼠标时默认结果消失，显示获取位置的星星数，鼠标离开时且未作评价继续显示默认结果。
6.完整的业务逻辑
View Code
1 <script type="text/javascript"> 2 var indexOld = 4.5;//显示初始评价 3 var float = 0;//判断是否点击了评价 4 var index = 0; //最后显示评价 5 var linkIndex = 0;//鼠标经过第几个五角星的数值 6 $(function () { 7 $('.estimateLevel1').hide(); 8 $('.estimateLevel2').hide(); 9 $('.estimateLevel3').hide(); 10 $('.estimateLevel4').hide(); 11 $('.estimateLevel5').hide(); 12 //对小数进行半星显示 13 indexOld_one = parseInt(indexOld); 14 indexOld_two = indexOld - indexOld_one; 15 for (var i = 0; i <= indexOld_one; i++) { 16 $("ul li:nth-child(" + i + ")").addClass('star-full'); 17 } 18 if (indexOld_two != 0) { 19 $("ul li:nth-child(" + (indexOld_one + 1) + ")").addClass('star-harf'); 20 } 21 22 $('ul#stars li').hover( 23 function () { 24 if (float == 0) { 25 linkIndex = $('ul#stars li').index(this); 26 //获取鼠标是清除所有CSS 27 var len = $('ul#stars li').length; 28 for (var i = 0; i <= len; i++) { 29 $("ul li:nth-child(" + i + ")").removeClass('star-full'); 30 $("ul li:nth-child(" + i + ")").removeClass('star-harf'); 31 } 32 //添加相应的星星 33 for (var i = 0; i <= linkIndex + 1; i++) { 34 $("ul li:nth-child(" + i + ")").addClass('star-full'); 35 } 36 //根据星星显示文字 37 if (linkIndex == 0) { 38 $('.estimateLevel1').show(); 39 } 40 if (linkIndex == 1) { 41 $('.estimateLevel2').show(); 42 } 43 if (linkIndex == 2) { 44 $('.estimateLevel3').show(); 45 } 46 if (linkIndex == 3) { 47 $('.estimateLevel4').show(); 48 } 49 if (linkIndex == 4) { 50 $('.estimateLevel5').show(); 51 } 52 } 53 }, 54 function () { 55 if (float == 0) { 56 //当鼠标离开时，先清除现在星星样式，在添加默认样式 57 for (var i = 0; i <= linkIndex+1; i++) { 58 $("ul li:nth-child(" + i + ")").removeClass('star-full'); 59 $("ul li:nth-child(" + i + ")").removeClass('star-harf'); 60 } 61 for (var i = 0; i <= indexOld_one; i++) { 62 $("ul li:nth-child(" + i + ")").addClass('star-full'); 63 } 64 if (indexOld_two != 0) { 65 $("ul li:nth-child(" + (indexOld_one + 1) + ")").addClass('star-harf'); 66 } 67 } 68 //隐藏所有文字效果 69 $('.estimateLevel1').hide(); 70 $('.estimateLevel2').hide(); 71 $('.estimateLevel3').hide(); 72 $('.estimateLevel4').hide(); 73 $('.estimateLevel5').hide(); 74 } 75 ); 76 //点击是记录数字 77 $('ul#stars li').live('click', function () { 78 if (float == 0) { 79 index = $('ul#stars li').index(this); 80 float = 1; 81 return false; 82 } 83 }); 84 }); 85 </script>
完成的效果图：
本人是菜鸟，做的不好请大家指教批评，热烈期盼和大家交流，QQ343548233，欢迎转载。
