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

2021-12-19 00:19:10

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

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

先来看看运行效果截图：

  <li><a href="http://www.100sucai.com/web/wangyezhizuo/fanhuidingbu/" title="返回顶部">返回顶部</a></li>

  <li><a href="http://www.100sucai.com/web/wangyezhizuo/tucengdaima/" title="图层代码">图层代码</a></li>

  <li><a href="http://www.100sucai.com/web/wangyezhizuo/gundongdaima/" title="滚动代码">滚动代码</a></li>

  <li><a href="http://www.100sucai.com/web/jquerytexiao/huandengpian/" title="幻灯片">幻灯片</a></li>

  <li><a href="http://www.100sucai.com/web/wangyezhizuo/wenzitexiao/" title="文字特效">文字特效</a></li>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml">

<HEAD>

<TITLE>jquery点评网星星评论</TITLE>

<style>

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(http://files.jb51.net/file_images/article/201508/201587170508564.png) 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(http://files.jb51.net/file_images/article/201508/201587170508564.png) 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(http://files.jb51.net/file_images/article/201508/201587170508564.png) 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(http://files.jb51.net/file_images/article/201508/201587170508564.png) 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; }

</style>

<SCRIPT src="jquery-1.6.2.min.js" type=text/javascript></SCRIPT>

</HEAD>

<script type="text/javascript">

$(function(){

 $('.star_ul a').hover(function(){$(this).addClass('active-star');$('.s_result').css('color','#c00').html($(this).attr('title'))},function(){$(this).removeClass('active-star');$('.s_result').css('color','#333').html('请打分')});

 $('.star_ul a').click(function(){

 alert($('.s_result').html());

})

$('.square_ul a').hover(function(){$(this).addClass('active-square');$(this).parents('.box_163css').find('.s_result_square').css('color','#c00').html($(this).attr('title'))},function(){$(this).removeClass('active-square');$(this).parents('.box_163css').find('.s_result_square').css('color','#333').html('请打分')});

 $('.square_ul a').click(function(){

  alert($(this).parents('.box_163css').find('.s_result_square').html());

 })

})

</script>

<BODY>

<div class="box_163css">

 <span class="s_name">总体评价：</span>

 <ul class="star_ul fl">

  <li><a class="one-star" title="很差" href="#"></a></li>

  <li><a class="two-star" title="差" href="#"></a></li>

  <li><a class="three-star" title="还行" href="#"></a></li>

  <li><a class="four-star" title="好" href="#"></a></li>

  <li><a class="five-star" title="很好" href="#"></a></li>

 </ul>

 <span class="s_result fl">请打分</span>

</div>

<div class="box_163css">

 <span class="s_name">口味：</span>

 <ul class="square_ul fl">

  <li><a class="square-1" title="差" href="#"></a></li>

  <li><a class="square-2" title="一般" href="#"></a></li>

  <li><a class="square-3" title="好" href="#"></a></li>

  <li><a class="square-4" title="很好" href="#"></a></li>

  <li><a class="square-5" title="非常好" href="#"></a></li>

 </ul>

 <span class="s_result_square fl">请打分</span>

</div>

<div class="box_163css">

 <span class="s_name">环境：</span>

 <ul class="square_ul fl">

  <li><a class="square-1" title="差" href="#"></a></li>

  <li><a class="square-2" title="一般" href="#"></a></li>

  <li><a class="square-3" title="好" href="#"></a></li>

  <li><a class="square-4" title="很好" href="#"></a></li>

  <li><a class="square-5" title="非常好" href="#"></a></li>

 </ul>

 <span class="s_result_square fl">请打分</span>

</div>

<div style="text-align:center;clear:both">

</div>

</BODY>

</HTML>

码农公寓

相关文章