带星图的JS评分特效,附源文件
时间:2007-01-12
来源:互联网
今天下午,为工司编写了一个评分特效。是第一次运用到JS对象编程(PHP管它叫类吧).可以实现大多数网站上的评分效果。附上源文件和演示的地址。
认为有用的顶一下吧~
演示:http://www.18c.com.cn/star/
认为有用的顶一下吧~
演示:http://www.18c.com.cn/star/
复制内容到剪贴板
<!--
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>
代码:
<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
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28