最近在做一个项目，需要做拖动的活动星星选取的评分效果。经过收集相关信息后，觉得实现起来并不难；因此做了个
精简实用的星星点评效果在此和大家分享下制作过程心得。
点评星星有三个事件：
1.当鼠标移过时，点亮最前的星星及跟随之后的星星。
2.当鼠标移开时，如果浏览者未点击过星星；将所有星星都取消点亮。若星星已点击过，点亮之前已点亮的星星。
3.当鼠标点击某个星星时，自动保存该星星的值；以备保存到数据表。
以下代码可支持多组星星点评
具体源码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> evaluate page </title>
<style type="css/text"></style>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="generator" content="editplus">
<meta name="keywords" content="key">
<meta name="description" content="desc">
<style type="text/css">
body{
font-size:12px;
}
span{
margin-left:5px;
}
div a{
float:left;
width:18px;
height:17px;
background:url("images/img1.jpg") no-repeat;
}
div .click_on{
background:url("images/img2.jpg") no-repeat;
}
</style>
</head>
<body>
<script type="text/javascript">
<!--
function star_onmouse_over($objName,$index,$msg_id){
$obj=document.getElementsByName($objName);
$count=$obj.length; //星星的数量
for ($i=0;$i<$count;$i++ )
{
$obj[$i].className=$i<$index?"click_on":"";
}
document.getElementById($msg_id).innerHTML=$obj[$index-1].title;
}
function star_onmouse_out($objName,$star_val_obj,$msg_id){
$obj=document.getElementsByName($objName);
$count=$obj.length;
$star_val=document.getElementById($star_val_obj).value;
if($star_val==0){
for ($i=0;$i<$count;$i++ )
{
$obj[$i].className="";
}
document.getElementById($msg_id).innerHTML='<font color="red">请对星星进行评分</font>';
}
else{
star_onmouse_over($objName,$star_val,$msg_id)
}
}
function star_onclick($star_val_obj,$index){
document.getElementById($star_val_obj).value=$index;
}
//-->
</script>
<h3>您对点评星星效果的意见</h3>
<div>
<a name="star1[]" title="差" onmouseover="star_onmouse_over(this.name,1,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',1)"></a>
<a name="star1[]" title="一般" onmouseover="star_onmouse_over(this.name,2,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',2)"></a>
<a name="star1[]" title="好" onmouseover="star_onmouse_over(this.name,3,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',3)"></a>
<a name="star1[]" title="很好" onmouseover="star_onmouse_over(this.name,4,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',4)"></a>
<a name="star1[]" title="非常好" onmouseover="star_onmouse_over(this.name,5,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',5)"></a>
<span id="show_msg"><font color="red">请对星星进行评分</font></span>
<input id="score" name="score" type="hidden" value="0">
</div>
</body>
</html>
分享到：
相关推荐
点键钮改变层这是很经典的一个例子，在这里我给大家做了一点点修改
设置层坐标位置 改变层坐标位置 top left
改变层的大小! 很值得下载看看!资源免费,大家分享!!
本文实例讲述了javascript实现动态改变层大小的方法。分享给大家供大家参考。具体实现方法如下： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
本文实例讲述了javascript实现鼠标拖动改变层大小的方法。分享给大家供大家参考。具体实现方法如下： <html> <head> <title>拖动改变层的大小</title> <meta content=text/html; ...
另外，在tools—>options—>routing中有layer pair选项，定义布线层对(Routing Layer Pair) 可以缩短在交互布线期间手工改变层时所花费的时间。（就是定义按F4时在哪两层间切换）布线层对(Pairing Routing Layers)...
javascript 动态改变层的Z-INDEX的代码style.zIndex
改变多层框架的破坏机制应从改变结构体系方面入手,在框架结构中设置少量剪力墙是在结构体系层次改善抗震性能的措施,用静力非线性分析方法对比分析了一个多层框架结构和设置少量剪力墙的框架结构的破坏机制,分析结果...
内容索引:脚本资源,jQuery,层拖动,jQuery插件 jQuery Resizable 可以让布局出的层元素块，在拖动了右下角之后可以随意改变层的大小，注意，它不是拖动一个层移动的插件，而是模仿Windows窗体的窗口缩放功能，想必...
在这项工作中，研究了使用脉冲真空电弧喷涂法在不锈钢基底上沉积铜涂层的工艺特征。... 最后，表明具有脉冲电弧的装置可以有效地用于工业中，因为可以通过改变沉积时间在数百微米的范围内改变层厚度。
IC61_培训资料，详细介绍了Cadence 最新的IC设计工具，IC设计必备参考。
乳液在合成过程中,由于工艺操作条件不同,会直接影响乳液的各项指标,从而改变涂层的性能。掌握乳液在合成过程中温度、加料速度等关键影响条件,调节各项指标使乳液粘度、含量控制在最佳范围,控制相应的操作条件,使乳液...
通过改变叠层橡胶支座的阻尼比和刚度,利用SAP2000有限元软件对模型进行不同地震波作用下动力时程分析。结果表明:控制异形柱框架结构的地震反应,可通过优选隔震层动力参数来实现;异形柱框架结构隔震系统阻尼比最优...
js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟...
内容索引:脚本资源,Ajax/JavaScript,层拖动,弹出层 可拖动改变大小的Js弹出层，妙味课堂的一个教学范例，很不错的例子，用JavaScript控制弹出层，并且可以拖动右下角改变层的大小，里面的内容可以自适应。