<!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 rating=(function(){ var init=function(el,num){ var $rating=$(el), $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); //事件绑定 $rating.on('mouseover','.rating-item',function(){ lightOn($(this).index()+1); }).on('click','.rating-item',function(){ num=$(this).index()+1; }).on('mouseout',function(){ lightOn(num); }); }; return { init:init }; })(); rating.init('#rating',2); rating.init('#rating2',3); rating.init('#rating3',4); </script> </body></html>
