[原创 js] 选星星点评功能

今天写了个滑过星星，点击发送打分的功能。看了下别人的思路，是用<a>标签套<img>标签，然后在<a>标签上写onmouseover事件，不同的星星上要发送不同的参数出去，觉得怪麻烦的。自己写个好了，不用那么麻烦，只要把<img>标签的父元素写个onmouseover事件就可以了，里面的<img>标签可以干干净净的。

//=================== 选星星点评功能 =======================
function rate(obj,oEvent){
//==================
// 图片地址设置
//==================
var imgSrc = 'http://image1.koubei.com/images/store/icon_star_1.gif';
var imgSrc_2 = 'http://image1.koubei.com/images/store/icon_star_2.gif';
//---------------------------------------------------------------------------

if(obj.rateFlag) return;
var e = oEvent || window.event;
var target = e.target || e.srcElement;
var imgArray = obj.getElementsByTagName("img");
for(var i=0;i<imgArray.length;i++){
    imgArray[i]._num = i;
    imgArray[i].onclick=function(){
     if(obj.rateFlag) return;
     obj.rateFlag=true;
     alert(this._num+1);
    };
}
if(target.tagName=="IMG"){
    for(var j=0;j<imgArray.length;j++){
     if(j<=target._num){
      imgArray[j].src=imgSrc_2;
     } else {
      imgArray[j].src=imgSrc;
     }
    }
} else {
    for(var k=0;k<imgArray.length;k++){
     imgArray[k].src=imgSrc;
    }
}
}

================= demo =======================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</style>

function rate(obj,oEvent){
//==================
// 图片地址设置
//==================
var imgSrc = 'http://image1.koubei.com/images/store/icon_star_1.gif';
var imgSrc_2 = 'http://image1.koubei.com/images/store/icon_star_2.gif';
//---------------------------------------------------------------------------

</script>

<body>

</body>
</html>

posted on 2008-05-04 19:03 真阿当阅读(105) 评论(0) 编辑收藏举报