仿淘宝星级评论的实现

1、先导入css

.rating-level {list-style:none;margin:1px 0 0 20px;float:left; padding:0; width:70px; height:12px; position:relative; background:url(rating_stars.gif) 0 0 repeat-x; overflow:hidden;font-size:0;}

.rating-level li{padding:0;margin:0;float:left;}

.rating-level li a{display:block;width:14px;height:12px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;}

.rating-level li a:hover{background:url(rating_stars.gif) 0 12px;z-index:2;left:0;}

.rating-level a.one_star{left:0;}

.rating-level a.one_star:hover{width:14px;}

.rating-level a.two_stars{left:14px;}

.rating-level a.two_stars:hover{width:28px;}

.rating-level a.three_stars{left:28px;}

.rating-level a.three_stars:hover{width:42px;}

.rating-level a.four_stars{left:42px;}

.rating-level a.four_stars:hover{width:56px;}

.rating-level a.five_stars{left:56px;}

.rating-level a.five_stars:hover{width:70px;}

.rating-level li.current_rating{background:url(rating_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent:-9000px;z-index:1;left:0;}

2、图片


3、div设置：

<div class="dengji" id="star_level" star_width="14" >

<span class="floatL">评论等级:</span>

<ul class="rating-level" id="stars2">

<li style="display:none;">

<input type="text" id="star" name="scienceComment.comment_star" value="" />

</li>

<li class="current_rating">3</li>

<li><a href="#" title="1星" class="one_star">1</a></li>

<li><a href="#" title="2星" class="two_stars">2</a></li>

<li><a href="#" title="3星" class="three_stars">3</a></li>

<li><a href="#" title="4星" class="four_stars">4</a></li>

<li><a href="#" title="5星" class="five_stars">5</a></li>

</ul>

<span class="submit" id="submit" action="${ctx }/saveComment">保存评论</span>

</div>

4、加上js代码

<script type="text/javascript">

function __start(){

var initialize_width=0;

if(document.getElelmentById){return false;};

if(document.getElementsByTagName==null){return false;}

var startLevelObj=document.getElementById("star_level");

if(startLevelObj==null){return false;}

initialize_width=parseInt(startLevelObj.getAttribute("star_width"),10);

if(isNaN(initialize_width) || initialize_width==0){return false;}

var ul_obj=startLevelObj.getElementsByTagName("ul");

if(ul_obj.length<1){return false;}

var length=ul_obj.length;

var li_length=0;

var a_length=0;

var li_obj=null;

var a_obj=null;

var defaultInputObj=null;

var defaultValue=null;

for(var i=0;i<length;i++){

li_obj=ul_obj[i].getElementsByTagName("li");

li_length=li_obj.length;

if(li_length<0){return false;}

//获取默认值

defaultInputObj=li_obj[0].getElementsByTagName("input");if(!defaultInputObj){return false;}

defaultValue=parseInt(defaultInputObj[0].value,10);

if(!isNaN(defaultValue) && defaultValue!=0){

//alert("有初始值!");

//li_obj[1].style.width=initialize_width*defaultValue+"px";

//defaultValue=0;

}

for(var j=0;j<li_length;j++){

a_obj=li_obj[j].getElementsByTagName("a");

if(a_obj.length<1){continue;}

if(a_obj[0].className.indexOf("star")>0){

a_obj[0].onclick=function(){

return give_value(this);

};

a_obj[0].onfocus=function(){

this.blur();

};

}

}

}

}

function give_value(obj){

var status=true;

var parent_obj=obj.parentNode;

var i=0;

while(status){

i++;

if(parent_obj.nodeName=="UL"){break;}

parent_obj=parent_obj.parentNode;

if(i>1000){break;}//防止找不到ul发生死循环

}

var hidden_input=parent_obj.getElementsByTagName("input")[0];

if(hidden_input.length<1){/*alert("sorry?\nprogram error!")*/;}

var txt=obj.firstChild.nodeValue;//确保不能存在空格哦，因为这里用的firstChild

if(isNaN(parseInt(txt,10))){/*alert('level error!')*/;return false;}

hidden_input.setAttribute("value",txt.toString());

//固定选中状态,先找到初始化颜色那个li

var current_li=parent_obj.getElementsByTagName("li");

var length=current_li.length;

var ok_li_obj=null;

for(var i=0;i<length;i++){

if(current_li[i].className.indexOf("current_rating")>=0){

ok_li_obj=current_li[i];break;//找到

}

}

__current_width=txt*14;

ok_li_obj.style.width=__current_width+"px";

return false;

}

__start();

</script>