jq点评网星星评论js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jq点评网星星评论js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <meta http-equiv=X-UA-Compatible content=IE =EmulateIE7>
    <link href="css/163css.css" type=text/css rel=stylesheet>
    <script src="js/jquery.js" type=text/javascript></script>
    <meta content="MSHTML 6.00.6000.17092" name=GENERATOR>
    <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>
</head>
<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>
</body>
</html>

CSS代码(163css.css):

@charset "utf-8";/* CSS Document */
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(../images/star.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(../images/star.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(../images/star.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(../images/star.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;}

附件:下载该文件资源,减少时间成本(增值服务)