<!DOCTYPE html><html lang="zh-cn"> <head> <title>星级评分</title> <meta charset="utf-8"> <style type='text/css'> *{ margin: 0; padding: 0; } li{ list-style: none; } .rating{ width: 390px; height: 65px; background: url(start.jpg); margin: 100px auto; } .rating-item{ width: 65px; height: 65px; } </style> </head> <body> <ul class="rating" id='rating'> <li class="rating-item" title='黑铁'></li> <li class="rating-item" title='青铜'></li> <li class="rating-item" title='白银'></li> <li class="rating-item" title='黄金'></li> <li class="rating-item" title='钻石'></li> <li class="rating-item" title='王者'></li> </ul> <script src='jquery.min.js'></script> <script type='text/javascript'> var num=2, $rating=$('#rating'), $item=$rating.find('.rating-item'); //点亮 var lightOn=function(num){ $item.each(function(index){ if(index<num){ $(this).css('background-position','0 -65px'); }else{ $(this).css('background-position','0 0'); } }); }; //初始化 lightOn(num); //事件绑定 $item.on('mouseover',function(){ lightOn($(this).index()+1); }).on('click',function(){ num=$(this).index()+1; }); $rating.on('mouseout',function(){ lightOn(num); }); </script> </body></html>
