+ -
当前位置:首页 → 问答吧 → 带星图的JS评分特效,附源文件

带星图的JS评分特效,附源文件

时间:2007-01-12

来源:互联网

今天下午,为工司编写了一个评分特效。是第一次运用到JS对象编程(PHP管它叫类吧).可以实现大多数网站上的评分效果。附上源文件和演示的地址。
认为有用的顶一下吧~


演示:http://www.18c.com.cn/star/
复制内容到剪贴板
代码:
<style type="text/css">
<!--
body {
background-color: #000000;
color:#FFFFFF;
font-size:9pt;
}
.mouse_pointer {
cursor:pointer;
margin-left:3px;
}
-->
</style>
默认值为2分
<form id="form_template_poll" name="form_template_poll" method="post" action="act.php">
<input type="hidden" name="user_id" id="user_id" value="26353518"/>
<input type="hidden" name="add_point" id="add_point" value="0"/>
<div  id="inner_star" name="inner_star">

</div>
</form>
<script language="javascript">
<!--
var __template_poll_log_point = 2;
//默认的评分值
var show_grede_star_num = 5;
//显示的星星总数
var control_grede_star = new grede_star(__template_poll_log_point,show_grede_star_num);
function grede_star(default_grede_star_num,show_star_num)
{
    this.star_array = document.getElementsByName('poco_star');
//星数组id
this.star_cent = document.form_template_poll.add_point;
//提交评分隐藏值
this.inner_str = document.getElementById('inner_star');
//提交评分隐藏值
this.star_num =  default_grede_star_num;
//默认的评分星星
this.show_star_num = show_star_num;


this.show_grade_star = show_grade_star;
//显亮星星
this.claer_grade_star = claer_grade_star;
//清除显亮星星
this.default_grede_star = default_grede_star;
//默认的星星数
this.onclick_grade_start = onclick_grade_start;
//提交处理页
this.inner_html = inner_html;
//生成星星
this.inner_html();

this.default_grede_star();

}
function default_grede_star()
{
for(i=0; i<this.star_array.length; i++)
{//循环出星星
  if( i< this.star_num)
  {//判断出默认的star个数
   this.star_array[i].src = "images/true_star.gif";
   
  }
  else {
   this.star_array[i].src = "images/false_star.gif";
   
  }
}
this.star_cent.value = this.star_num;
}
function inner_html()
{
var inner_html_str = "<img src=\"images/false_star.gif\" class=\"mouse_pointer\" onmouseover=\"control_grede_star.claer_grade_star()\" alt=\"0分\"/>";
//默认的星星第一个
for(i=1;i<this.show_star_num +1;i++)
{//循环出星星
  inner_html_str+="<img src=\"images/false_star.gif\" onclick=\"control_grede_star.onclick_grade_start()\" onmouseout=\"control_grede_star.default_grede_star()\" onmouseover=\"control_grede_star.show_grade_star("+i+")\" class=\"mouse_pointer\" id=\"poco_star\" name=\"poco_star\" alt=\""+i+"分\"/>";
}
this.inner_str.innerHTML = inner_html_str;
}
function show_grade_star(cent)
{
for(i=0; i<this.star_array.length; i++)
{//循环出星星
  if( i< cent)
  {
   this.star_array[i].src = "images/true_star.gif";
  }
  else {
   this.star_array[i].src = "images/false_star.gif";
  }
}

this.star_cent.value = cent;
//评分的值

}
function claer_grade_star()
{

for(i=0; i<this.star_array.length; i++)
{//清除所有的true星星
  
  this.star_array[i].src = "images/false_star.gif";
}

}
function onclick_grade_start()
{
document.form_template_poll.submit();
}
//-->
</script>

作者: sufing0x1   发布时间: 2007-01-11

作者: jefsun   发布时间: 2008-04-11