简单的做了一个评分控件，其实还算不上控件，只是用javascript做了一个效果，可以直接放在你的程序中使用。...

以下内容是纯html+javascript代码：

讲解一下：

先看html部分

 

< body >
< div  style ="width:224; cursor:hand"  onmouseout ="setjb()" >
< div >
< img  id ="img1"  src ="1.png"  width ="32"  height ="32"  alt ="1"  onmouseover ="fdfd(1)"  onclick ="setClick(1)"   />
< img  id ="img2"  src ="1.png"  width ="32"  height ="32"  alt ="1"  onmouseover ="fdfd(2)"  onclick ="setClick(2)"    />
< img  id ="img3"  src ="1.png"  width ="32"  height ="32"  alt ="1"  onmouseover ="fdfd(3)"  onclick ="setClick(3)"    />
< img  id ="img4"  src ="1.png"  width ="32"  height ="32"  alt ="1"  onmouseover ="fdfd(4)"  onclick ="setClick(4)"    />
< img  id ="img5"  src ="1.png"  width ="32"  height ="32"  alt ="1"  onmouseover ="fdfd(5)"  onclick ="setClick(5)"    />
< img  id ="img6"  src ="1.png"  width ="32"  height ="32"  alt ="1"  onmouseover ="fdfd(6)"  onclick ="setClick(6)"    />
< img  id ="img7"  src ="1.png"  width ="32"  height ="32"  alt ="1"  onmouseover ="fdfd(7)"  onclick ="setClick(7)"    />
< input  id ="jb"  type ="hidden"  value ="1"   />
</ div >
</ div >

</ body >

在这里定义了几个事件：

1、onmouseover="fdfd(X)" （X换成对应的数值） ：是 onmouseover 事件。也就是当鼠标在这些图片上移动的时候，要执行的动作。下面直接看一下动作的内容

 

function  fdfd(jb)
{   
     for ( var  i = 1 ;i <= 7 ;i ++ )
    {
         var  dc  =  document.getElementById( " img " + i);
         if (jb >= i)
        {
        dc.src  =   " 2.png " ;}  else
        {dc.src  =   " 1.png " ;}
    }
}

这句话的意思就是将7个图像跑一遍：根据得到的jb值，设定所有图像的内容。

 

2、onclick="setClick(X)"  （X换成对应的数值）是当鼠标在图像控件执行onclick事件代码。直接看代码

 

function  setClick(jbvalue)
{
    document.getElementById( " jb " ).value  =  jbvalue;
    }

这句话的意思就是，直接找到隐藏的内容，将内容修改为 要记录的值。

 

3、onmouseout="setjb()"  这是当鼠标离开DIV标签时，所要做的事情，很好理解。看看都做了些什么事情吧

 

function  setjb()
{
     var  jb  =  document.getElementById( " jb " ).value;
    fdfd(jb);
    
    }

就是根据隐藏部分记录的值来修改当前的显示。

 

总结：

1、当鼠标在图像控件中移动的时候，动态的显示当前会选择的评分级别的值。

2、当鼠标在图像控件中点击某个控件的时候，就记下评分级别。当然是记录在一个隐藏内容里了。

3、当鼠标离开后，就直接根据隐藏内容的值来设置图像控件的显示。

下面是源代码，可以下载下来参考一下。

/Files/lujin49/HTML/pfkj.zip

转载于:https://www.cnblogs.com/lujin49/archive/2011/08/03/2126776.html