<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"/> <title>星级评分</title> <style type="text/css"> body ul li{ margin: 0; padding: 0; } li{ list-style: none; } .rating{ width: 130px; height: 26px; margin: 100px auto; } .rating-item{ float: left; width: 26px; height: 26px; cursor: pointer; background:url(rating.jpg) no-repeat; } </style> </head> <body background="#ccc"> <ul id="rating" class="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> </ul> <ul id="rating2" class="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> </ul> <script src="jquery.js"></script> <script> // rating是一个对象 var rating = (function(){ // 点亮 var lightOn = function($item,num){ $item.each(function(index){ if(index<num){ $(this).css('background-position','0 -26px'); }else{ $(this).css('background-position','0 0'); } }); } var init= function(el,num){ var $rating = $(el), $item=$rating.find('.rating-item'); // 初始化 lightOn($item,num); // 事件绑定 $rating.on('mouseover','.rating-item',function(){ lightOn($item,$(this).index()+1); }).on('click','.rating-item',function(){ num = $(this).index()+1; }).on('mouseout',function(){ lightOn($item,num); }); }; // Jquery 插件 $.fn.extend({ rating:function(num){ return this.each(function(){ init(this,num); }); } }); // 返回一个对象 return { init:init }; })(); rating.init('#rating',2); // rating.init('#rating2',3); $("#rating2").rating(4); </script> </body> </html>
效果图如下:
rating.jpg图: