jQuery基于ajax实现星星评论代码

这篇文章主要介绍了jQuery基于ajax实现星星评论代码,可实现实时显示评论效果的功能,基于Ajax实现,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了jQuery基于ajax实现星星评论代码。分享给大家供大家参考。具体如下：

这里使用jquery模仿点评网的星星评论功能，Ajax评论模块，鼠标点击星星即可评价，下边是分数，可以点击后给分，网上很流行的效果，本代码相对完整，相信很多朋友会喜欢的。

先来看看运行效果截图：

具体代码如下：

    body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;} ul,ol,li{list-style:none;} input,button{margin:0;font-size:12px;vertical-align:middle;} body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:left; margin:0 auto;} table{border-collapse:collapse;border-spacing:0;} b,em,i{ font-style:normal; font-weight:normal;} h1,h2,h3,h4{ font-size:14px;} h5{ font-size:12px;} h6{ font-size:12px;font-style:normal;} .fl{ float: left; display: inline;} .box_163css{ width: 480px;margin:20px auto; height: 30px;} .s_name{ float:left; display: block; width: 60px; padding-top: 4px; text-align: right;} .star_ul{background: url(//img.jbzj.com/file_images/article/201508/201587170508564.png-600) no-repeat 0 -150px; width: 132px; z-index: 10; position: relative; height: 25px;} .star_ul li{ float: left; margin-right:1px;width: 25px; height: 25px; } .star_ul li a{ display: block; height: 25px; position: absolute; left: 0; top: 0; text-indent: -999em;} .star_ul li .active-star{background: url(//img.jbzj.com/file_images/article/201508/201587170508564.png-600) no-repeat;} .star_ul li .one-star{width: 25px;background-position:0 -120px; z-index: 50;} .star_ul li .two-star{width: 51px;background-position:0 -90px;z-index: 40;} .star_ul li .three-star{width:79px; background-position:0 -60px;z-index: 30;} .star_ul li .four-star{width:105px; background-position:0 -30px;z-index: 20;} .star_ul li .five-star{width:129px; margin-right: 0; background-position:0 0;z-index: 10;} .s_result{ padding: 6px 0 0 5px; } .square_ul{background: url(//img.jbzj.com/file_images/article/201508/201587170508564.png-600) no-repeat 0 -222px; width: 146px; z-index: 10; position: relative; height: 20px;} .square_ul li{ float: left; margin-right:1px;width: 29px; height: 20px; } .square_ul li a{ display: block; height: 20px; position: absolute; left: 0; top: 0; text-indent: -999em;} .square_ul li .active-square{background: url(//img.jbzj.com/file_images/article/201508/201587170508564.png-600) no-repeat;} .square_ul li .square-1{width: 29px;background-position:0 -243px; z-index: 50;} .square_ul li .square-2{width: 58px;background-position:0 -264px;z-index: 40;} .square_ul li .square-3{width:87px; background-position:0 -285px;z-index: 30;} .square_ul li .square-4{width:116px; background-position:0 -306px;z-index: 20;} .square_ul li .square-5{width:145px; margin-right: 0; background-position:0 -327px;z-index: 10;} .s_result_square{padding: 4px 0 0 9px; }     总体评价：
 
请打分 口味：
 
请打分 环境：
 
请打分 

希望本文所述对大家的jquery程序设计有所帮助。

以上就是jQuery基于ajax实现星星评论代码的详细内容，更多请关注本站其它相关文章！