网页上怎样表示动态用星星表示评分 的html+css，支持半颗星

你可以到这个地方去看一下

http://www.zhangxinxu.com/study/201308/hello-star.html

半星可以将图片换成灰色星星和半星然后多加5个A标签和label

插件 赞助商链接以前写过一篇文章以jquery为基础的星星评分 ，今天有时间把这个功能重写，并以jQuery插件的形式出现以便以后使用。 首先看一下运行效果如下图所示。

附件: star_on.gif

鼠标移到星星上该星星前面的所有星星全部变亮，鼠标单击将记录点击的星星数，前面的所有星星将变亮。

一、原理

本程序的原理是这样的：一个“ul”标签，该标签的背景为灰色的星星，控制“ul”标签的宽度显示星星的数量。例如：一个星星图片的宽度为23px，那么要显示10个星星，则“ul”的宽度为230px就可以显示10个星星。

n个“li”标签，n表示您要显示星星的个数，例如你要显示10个星星那么将有10个“li”标签。那么这10个标签的宽度分别为1个星星的宽度 23px，2个星星的宽度46px，......，10个星星的宽度230px。这些“li”标签的背景将为蓝色的星星。

则另外还有一个“li”标签记录鼠标单击的星星或初始设置。

这些标签都是重叠在一起的，通过鼠标滑动效果切换这些标签的层叠顺序，显示不同的星星数量，单击记录星星个数。

二、源码 $.fn.studyplay_star=function(options,callback){

//默认设置

var settings ={

MaxStar :20,

StarWidth:23,

CurrentStar :5,

Enabled :true

}

if(options) { jQuery.extend(settings, options)}

var container = jQuery(this)

container.css({"position":"relative"})

.html('<ul class="studyplay_starBg"></ul>')

.find('.studyplay_starBg').width(settings.MaxStar*settings.StarWidth)

.html('<li class="studyplay_starovering" style="width:'+settings.CurrentStar*settings.StarWidth+'pxz-index:0" id="studyplay_current"></li>')

if(settings.Enabled)

{

var ListArray = ""

for(k=1k<settings.MaxStar+1k++)

{

ListArray +='<li class="studyplay_starON" style="width:'+settings.StarWidth*k+'pxz-index:'+(settings.MaxStar-k+1)+'"></li>'

}

container.find('.studyplay_starBg').append(ListArray)

.find('.studyplay_starON').hover(function(){

$("#studyplay_current").hide()

$(this).removeClass('studyplay_starON').addClass("studyplay_starovering")

},

function(){

$(this).removeClass('studyplay_starovering').addClass("studyplay_starON")

$("#studyplay_current").show()

})

.click(function(){

var studyplay_count = settings.MaxStar - $(this).css("z-index")+1

$("#studyplay_current").width(studyplay_count*settings.StarWidth)

//回调函数

if (typeof callback == 'function') {

callback(studyplay_count)

return

}

})

}

}

复制代码这个插件有两个参数一个是options表示插件的一些基本设置；callback表示回调函数，该函数存在一个参数表示用户选择的星星数量。

三、使用

如果我们想在id为“z”的div上显示5个星星，默认有一颗星星选中，d出选择星星的个数对话框，就可以如下编写代码： <div id="z"></div>

<script type="text/javascript">

$(document).ready(function(){

$("#z").studyplay_star({MaxStar:5,CurrentStar:2},function(value){alert(value)})

})

</script>

复制代码如果想显示评分结果 可以把Enabled设置false就ok了。（文/zhaoyang）

四、代码下载： 星级评分--jQuery插件

html部分:

<table class="block">

<tr>

<td>

<span class="label">总体评价<em>*</em>:</span>

</td>

<td>

<div class="rating-wrap">

<ul class="rating-wrap-ul" onmouseout="onUlMouseOut()" onmouseover="onUlMouseOver()">

<li><a class="one-star" title="很差" data-hint="很差" href="javascript:clickStar(1)" onmouseover="onLiMouseOver(1)" onmouseout="onLiMouseOut()"></a></li>

<li><a class="two-stars" title="差" data-hint="差" href="javascript:clickStar(2)" onmouseover="onLiMouseOver(2)" onmouseout="onLiMouseOut()"></a></li>

<li><a class="three-stars" title="还行" data-hint="还行" href="javascript:clickStar(3)" onmouseover="onLiMouseOver(3)" onmouseout="onLiMouseOut()"></a></li>

<li><a class="four-stars" title="好" data-hint="好" href="javascript:clickStar(4)" onmouseover="onLiMouseOver(4)" onmouseout="onLiMouseOut()"></a></li>

<li><a class="five-stars" title="很好" data-hint="很好" href="javascript:clickStar(5)" onmouseover="onLiMouseOver(5)" onmouseout="onLiMouseOut()"></a></li>

</ul>

</div>

<span id="ratingText" class="active-hint" innerText=""></span>

</td>

</tr>

<tr>

<td>

<span class="label">评价<em>*</em>:</span>

</td>

<td>

<span class="note">(50-2000个字)</span>

<span id="textCount" class="note" innerText=""></span>

</td>

</tr>

<tr>

<td>

</td>

<td>

<textarea name="appraiseText" id="appraiseText" class="form-content-block form-textarea" rows="12"></textarea>

</td>

</tr>

<tr>

<td>

</td>

<td align="right">

<input type="button" value="提交" onclick="submitAppraise()">

<input type="button" value="关闭" onclick=" ">

</td>

</tr>

</table>

CSS:

body {

color: #333

font: normal normal normal 12px/1.5 Arial, 宋体, sans-serif

}

.block{

clear: both

margin-bottom:20px

margin-bottom: 10px

zoom: 1

padding:5px 11pxborder:1px solid #F5EEE8

padding-top:10pxmargin:0 10px 0

padding-bottom:20pxborder-bottom:1px dashed #E4E4E4

margin:10px autopadding:0border:none

}

.label{

float:right

margin-right: 10px

text-align: right

font-weight: normal

font-style:normal

width: 94px

}

em{

margin-right:5px

color:#c00

font-weight:bold

font-style:normal

margin-left:2px

}

.note {

color: #999

}

.form-textarea{

float: left

font-family: Tahoma, Geneva, sans-serif

margin-right: 5px

width: 598px

zoom: 1

font-family: inherit

font-size: 100%

-webkit-appearance: textarea

-webkit-box-orient: vertical

-webkit-rtl-ordering: logical

-webkit-user-select: text

background-color: white

border: 1px solid

cursor: auto

padding: 2px

resize: auto

white-space: pre-wrap

word-wrap: break-word

}

.rating-wrap {

display: inline-block

float: left

position: relative

top: -2px

width: 89px

height: 20px

margin-right: 5px

padding: 4px 0 0 5px

border: 1px solid #EFE0D7

background: #FFF9F1

z-index: 0

}

.rating-wrap ul,.rating-wrap a:hover {

background-image: url(../images/star_shade.png)

background-repeat: no-repeat

}

.rating-wrap ul {

-webkit-padding-start: 40px

display: block

list-style-type: disc

margin: 1em 0px

border: 0px

margin: 0px

outline: 0px

padding: 0px

list-style: none

position: relative

width: 85px

height: 16px

background-position: 0 -90px

z-index: 10

}

.rating-wrap li {

display: inline

}

.rating-wrap a {

zoom: 1

position: absolute

left: 0

top: 0

display: block

height: 16px

}

.rating-wrap .five-stars {

width: 84px

z-index: 10

background-position: 0 0px

}

.rating-wrap .four-stars {

width: 68px

z-index: 20

background-position: 0 -18px

}

.rating-wrap .three-stars {

width: 51px

z-index: 30

background-position: 0 -36px

}

.rating-wrap .two-stars {

width: 34px

z-index: 40

background-position: 0 -54px

}

.rating-wrap .one-star {

width: 17px

z-index: 50

background-position: 0 -72px

}

.active-hint{

color: #C00

float: left

padding-top:2px

font-weight: normal

font-style:normal

}

JS:

$(document).ready(function(){

$("#appraiseText").bind("keydown", function(){

var count = $("#appraiseText").val().length

if( count <= 200 ){

$("#textCount").html(" 还能输入<font color='green'><b>" + (200 - count) + "</b></font>个字")

}else{

$("#textCount").html(" 已超出<font color='red'><b>" + (count - 200) + "</b></font>个字")

}

})

})

var starValue=0

function onUlMouseOut(){

var y = -90 + starValue * 18

var position = "0 " + y + "px"

$(".rating-wrap-ul").css({

"background-position" : position

})

}

function onUlMouseOver(){

$(".rating-wrap-ul").css({

"background-position" : "0 -90px"

})

}

function onLiMouseOver(grade){

switch(grade){

case 1 : document.getElementById("ratingText").innerHTML="很差"break

case 2 : document.getElementById("ratingText").innerHTML="差"break

case 3 : document.getElementById("ratingText").innerHTML="还行"break

case 4 : document.getElementById("ratingText").innerHTML="好"break

case 5 : document.getElementById("ratingText").innerHTML="很好"break

default : document.getElementById("ratingText").innerHTML=""

}

}

function onLiMouseOut(){

onLiMouseOver(starValue)

}

function clickStar(grade){

starValue = grade

var y = -90 + grade * 18

var position = "0 " + y + "px"

$(".rating-wrap-ul").css({

"background-position" : position

})

}

希望能帮到你

---