需要引入jquery和raty的js，并且低版本的jquery可能会出现样式问题，或者点击没反应，可换高版本试试
raty文档及下载：
http://www.wbotelhos.com/raty/
把下载后文件夹中的lib下文件拷到自己项目下
1 <script language="javascript" type="text/javascript" src="/JavaScript/jquery/jquery-2.1.0.min.js"></script> 2 <script language="javascript" type="text/javascript" src="/JavaScript/star/jquery.raty.js"></script> 3 4 <div id="star"></div><!--> 显示星级用<--> 5 <div id="result" style="display:none;"></div><!--> 用户选中星级后的结果<--> 6 7 <script> 8 $("#star").raty({ 9 hints: ['1', '2', '3', '4', '5'],//鼠标悬浮在星星对应显示的值 10 path:"<%=PropertiesConfigureTools.getRESOURCE_URL()%>/JavaScript/star/images",//可以改成你存放的图片路径 11 starOff: 'star-off.png',//可以改变图片 12 starOn: 'star-on.png',//可以改变图片 13 size: 24,//div长度 14 target: '#result',//结果位置 15 targetKeep : true//属性设置为true，用户的选择值才会被保持在目标DIV中，否则只是鼠标悬停时有值，而鼠标离开后这个值就会消失。 16 half:true 17 18 }); 19 //将隐藏div的值发送给服务器即可 20 </script>
1 <!DOCTYPE html> 2 <html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> 6 <meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport"> 7 <title></title> 8 9 <link type="text/css" rel="stylesheet" href="demo/css/application.css"> 10 <script type="text/javascript" src="demo/js/jquery.min.js"></script> 11 <script type="text/javascript" src="lib/jquery.raty.min.js"></script> 12 </head> 13 <body> 14 <div style="500px; margin:100px auto;"> 15 <div class="demo"> 16 <div id="function-demo" class="target-demo"></div> 17 <div id="function-hint" class="hint"></div> 18 </div> 19 <div class="demo"> 20 <div id="function-demo1" class="target-demo"></div> 21 <div id="function-hint1" class="hint"></div> 22 </div> 23 </div> 24 <script type="text/javascript"> 25 $(function() { 26 $.fn.raty.defaults.path = 'lib/img'; 27 $('#function-demo').raty({ 28 number: 3,//多少个星星设置 29 targetType: 'hint',//类型选择，number是数字值，hint，是设置的数组值 30 path : 'demo/img', 31 hints : ['差','一般','好'], 32 cancelOff : 'cancel-off-big.png', 33 cancelOn : 'cancel-on-big.png', 34 size : 24, 35 starHalf : 'star-half-big.png', 36 starOff : 'star-off-big.png', 37 starOn : 'star-on-big.png', 38 target : '#function-hint', 39 cancel : false, 40 targetKeep: true, 41 targetText: '请选择评分', 42 43 click: function(score, evt) { 44 alert('ID: ' + $(this).attr('id') + " score: " + score + " event: " + evt.type); 45 } 46 }); 47 48 $('#function-demo1').raty({ 49 number: 10,//多少个星星设置 50 score: 2,//初始值是设置 51 targetType: 'number',//类型选择，number是数字值，hint，是设置的数组值 52 path : 'demo/img', 53 cancelOff : 'cancel-off-big.png', 54 cancelOn : 'cancel-on-big.png', 55 size : 24, 56 starHalf : 'star-half-big.png', 57 starOff : 'star-off-big.png', 58 starOn : 'star-on-big.png', 59 target : '#function-hint1', 60 cancel : false, 61 targetKeep: true, 62 precision : false,//是否包含小数 63 click: function(score, evt) { 64 alert('ID: ' + $(this).attr('id') + " score: " + score + " event: " + evt.type); 65 } 66 }); 67 }); 68 69 70 </script>
1 全局改变设置： 2 3 你可以全局更改上述提到的所有设置 $.fn.raty.defaults.OPTION = VALUE;. 该语句必须添加在插件绑定之前。 4 $.fn.raty.defaults.path = assets; 5 $.fn.raty.defaults.cancel = true; 6 7 参数： 8 9 cancel : false // Creates a cancel button to cancel the rating. 10 cancelClass : 'raty-cancel' // Name of cancel's class. 11 cancelHint : 'Cancel this rating!' // The cancel's button hint. 12 cancelOff : 'cancel-off.png' // Icon used on active cancel. 13 cancelOn : 'cancel-on.png' // Icon used inactive cancel. 14 cancelPlace : 'left' // Cancel's button position. 15 click : undefined // Callback executed on rating click. 16 half : false // Enables half star selection. 17 halfShow : true // Enables half star display. 18 hints : ['bad', 'poor', 'regular', 'good', 'gorgeous'] // Hints used on each star. 19 iconRange : undefined // Object list with position and icon on and off to do a mixed icons. 20 mouseout : undefined // Callback executed on mouseout. 21 mouseover : undefined // Callback executed on mouseover. 22 noRatedMsg : 'Not rated yet!' // Hint for no rated elements when it's readOnly. 23 number : 5 // Number of stars that will be presented. 24 numberMax : 20 // Max of star the option number can creates. 25 path : undefined // A global locate where the icon will be looked. 26 precision : false // Enables the selection of a precision score. 27 readOnly : false // Turns the rating read-only. 28 round : { down: .25, full: .6, up: .76 } // Included values attributes to do the score round math. 29 score : undefined // Initial rating. 30 scoreName : 'score' // Name of the hidden field that holds the score value. 31 single : false // Enables just a single star selection. 32 space : true // Puts space between the icons. 33 starHalf : 'star-half.png' // The name of the half star image. 34 starOff : 'star-off.png' // Name of the star image off. 35 starOn : 'star-on.png' // Name of the star image on. 36 target : undefined // Element selector where the score will be displayed. 37 targetFormat: '{score}' // Template to interpolate the score in. 38 targetKeep : false // If the last rating value will be keeped after mouseout. 39 targetScore : undefined // Element selector where the score will be filled, instead of creating a new hidden field (scoreName option). 40 targetText : '' // Default text setted on target. 41 targetType : 'hint' // Option to choose if target will receive hint o 'score' type. 42 starType : 'img' // Element used to represent a star. 43 44 回调函数： 45 46 $('div').raty('score'); // Get the current score. 47 48 $('div').raty('score', number); // Set the score. 49 50 $('div').raty('click', number); // Click on some star. 51 52 $('div').raty('readOnly', boolean); // Change the read-only state. 53 54 $('div').raty('cancel', boolean); // Cancel the rating. The last param force the click callback. 55 56 $('div').raty('reload'); // Reload the rating with the current configuration. 57 58 $('div').raty('set', { option: value }); // Reset the rating with new configurations. 59 60 $('div').raty('destroy'); // Destroy the bind and give you the raw element. 61 62 $('div').raty('move', number); // Move the mouse to the given score point position.