最近在做一个项目，需要做拖动的活动星星选取的评分效果。经过收集相关信息后，觉得实现起来并不难；因此做了个
精简实用的星星点评效果在此和大家分享下制作过程心得。
点评星星有三个事件：
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"这个主题主要关注如何移动层到指定的顶部（top）和左侧（left）坐标。 层的位置通常由其左上角的坐标决定，这些坐标定义了层相对于其容器或画布的参考点。在二维空间中，...
改变层的大小! 很值得下载看看!资源免费,大家分享!!
本文实例讲述了javascript实现鼠标拖动改变层大小的方法。分享给大家供大家参考。具体实现方法如下： <html> <head> <title>拖动改变层的大小</title> <meta content=text/html; ...
在这个实例中，我们将深入探讨如何使用JavaScript来动态改变HTML元素（特别是层，即`div`）的大小。 首先，我们需要了解HTML中的`div`元素。`div`是一个块级元素，通常用来组织网页内容。在CSS中，我们可以为`div`...
在讨论如何使用JavaScript动态改变层的Z-INDEX时，首先要了解Z-INDEX这一属性的作用。在Web开发中，Z-INDEX是一个CSS属性，它决定了页面上重叠元素的堆叠顺序。拥有更高Z-INDEX值的元素会显示在较低值的元素之上。 ...
通过修改“z-index”属性，可以改变层的前后关系，数值越大，层越靠前显示。 5. **锁定与解锁层**：为了防止误操作，可以将层锁定。在层上右击并选择“锁定”即可，再次右击选择“解锁”可恢复编辑状态。 6. **层...
通过改变层的`opacity`或`transform`属性，并结合`setTimeout`或`requestAnimationFrame`函数，可以实现平滑的动画效果。 3. **定位与布局**：JavaScript允许动态调整层的位置，比如通过改变`style.left`和`style....
例如，自由边界、固定边界或简支边界都会改变层合板的响应。因此，在实际应用中，你可能需要根据具体的边界条件调整计算模型。 总结来说，"matlab_材料_rigidity_求层合板刚度_"的主题涉及到利用MATLAB进行复合材料...
- **在普通层间移动**：`'Normal'`层的对象可以根据需要调整顺序，例如，创建后新对象默认在`'Normal'`层，但可以通过`setlayer`改变其相对位置。 `setlayer`函数在GUI开发中的应用广泛，例如： - 当有多个控件需要...
**隐藏层**则不同，它仅改变层的可见性，但并不从DOM中移除。层依然存在于页面中，只是通过CSS（Cascading Style Sheets）属性如`display:none`或`visibility:hidden`使其不可见。隐藏层的元素仍会占用一定的计算...
- 通过S键展开缩放属性，可调整Scale值来改变层的尺寸。若要保持纵横比，可以选择Preserve frame ratio；若要实现翻转效果，可以输入负数的宽度或高度值。 7. **运动路径的修改**： - After Effects提供了强大的...
内容索引:脚本资源,jQuery,层拖动,jQuery插件 jQuery Resizable 可以让布局出的层元素块，在拖动了右下角之后可以随意改变层的大小，注意，它不是拖动一个层移动的插件，而是模仿Windows窗体的窗口缩放功能，想必...
开发者会监听这些事件，比如在JavaScript中使用`click`事件，然后在事件处理函数中改变层的尺寸属性，比如宽度和高度，以达到最大化或最小化的效果。在某些情况下，可能还需要考虑到窗口的边界，确保层不会超出屏幕...
3. **改变层的顺序**：通过拖动图层调整其在时间轴中的位置，改变显示和编辑的优先级。 4. **新建层文件夹**：用于进一步整理图层，可以嵌套图层和文件夹，提高管理效率。 5. **锁定和解锁层**：防止误操作，锁定层...
9. **注意事项**：缩放操作可能会改变层的像素密度，导致模糊或失真。对于需要保持清晰度的项目，应谨慎调整Scale比例。 通过理解并熟练掌握AE中的Scale比例，设计师和动画师可以更加自由地创作出各种视觉效果，...