jQuery动态星级评分效果实现方法

本文实例讲述了jQuery动态星级评分效果实现方法。分享给大家供大家参考。具体如下：

这里的jQuery星级评分代码，是大家都很喜欢的功能，目前广泛应用，本星级评分加入了动画效果，注意，如果要真正实现星级评分，你需要动态程序配合，如ASP/PHP等，以便将评分值存入数据库。

运行效果如下图所示：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejquery超漂亮星级评分/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/脚本样式。user _ rate { font-size :14 px位置：相对；padd :10 px 0；}.用户费率p { margin:0划水：0;显示：内联高度：40 px飞越：隐藏；位置：绝对；top:0left:100px左边距left:140px}。用户费率p span。s { font-size :36 px线高：36 pxfloat : left font-weight : bold；color: # DD5400}。用户费率p span。g { font-size :22 px显示：块；float : leftcolor : # DD 5400 }。big _ rate _ bak { width:140px高度：28 px向左文本对齐：位置：绝对；top :3 pxleft :85 pxdisplay :内联块；后台： URL(//文件。JB 51。net/file _ images/article/201508/201586174000242。gif)左下重复-x；}.big _ rate _ bak b { display : inline-block；宽度：24 px高度：28 px位置：相对；z指数：1000;光标：指针指针；飞越：隐藏；}.big _ rate _ up { width:140px高度：28 px位置：绝对；top :0 left :0后台： URL(//文件。JB 51。net/file _ images/article/201508/201586174000242。gif)左上角；}/style/head dydiv class=' user _ rate ' div class=' big _ rate _ bak ' b rate=' 2 ' onclick=' JavaScript : up _ rate(20)；'b rate=' 4 ' onclick=' JavaScript : up _ rate(40)；'b rate=' 6 ' onclick=' JavaScript : up _ rate(60)；'b rate=' 8 ' onclick=' JavaScript : up _ rate(80)；'b rate=' 10 ' onclick=' JavaScript : up _ rate(100)；'div style=' width :45 px ' class=' big _ rate _ up '/div/div PS pan id=' s ' class=' s '/span id=' g ' class=' g '/span/p/div brbr如果运行错误请刷新页面即可~/body脚本类型=' text/JavaScript ' $(function(){ get _ rate(88)；})函数get _ rate(rate){ rate=rate。tostring()；风险值var g；$('#g ').show()；if(速率。长度=3){ s=10；g=0；$('#g ').hide()；} else if(rate==' 0 '){ s=0；g=0；}else{ s=rate.substr(0，1)；g=rate.substr(1，1)；} $(“# s”).文本；$('#g ').文本('.g)；$('.大利率上调').动画({ width :(parsent(s)parsent(g)/10)* 14，height:26}，1000)；$('.大利率.每个（函数(){ $(此)).mouseover(function(){ $(')).大利率上调').宽度($(这个).attr(' rate ')* 14)；$('#s ').文本($(这个).attr(' rate ')；$('#g ').文本("");}).单击(函数(){ $('#f ')).文本($(这个).attr(' rate ')；$(“# my _ rate”).show()；}) }) $('.big _ rate _ bak’.mouseout(函数(){ $(“# s”)).文本；$('#g ').文本('.g)；$('.大利率上调').宽度((parsent(s)parsent(g)/10)* 14)；})}函数up_rate(rate){ $(' .大利率上调').宽度(' 0 ');get_rate(速率);}/脚本/html希望本文所述对大家的jquery程序设计有所帮助。