<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0}
#wrapper{margin: 50px auto}
</style>
<script>
window.onload = function(){
fn('wrapper');
fn('wrapper1');
fn('wrapper')
}
function fn(id){
var oDiv = document.getElementById(id)
var oStar = oDiv.getElementsByTagName('strong')[0];
var aImg = oStar.getElementsByTagName('img');
var oText = oDiv.getElementsByTagName('span')[1];
var arrText = ['很差','凑合','一般般','不错','很好'];
var oClick = true;//申明一个布尔值,判断鼠标移除与点击之后的冲突,点击效果之后会连带鼠标移除,这里有冲突的
for(var i=0;i<aImg.length;i++){
aImg[i].index = i;
aImg[i].onmouseover = function() { //鼠标移入函数
oClick = true;
oText.innerHTML = arrText[this.index];//后面文字
if (this.index < 2) {//鼠标到达位置小于2
for (var m= 0; m <= this.index; m++) {
aImg[m].src = 'img/nsg.gif';//变为黑灰色
}
} else if (1<this.index < 5) {//大于1小于5
for (var m= 0; m <= this.index; m++) {
aImg[m].src = 'img/sth.gif';//变为黑色
}
}
this.onmouseout = function(){//鼠标移除效果
if(oClick){
for(var i=0;i<aImg.length;i++){
aImg[i].src = 'img/nst.gif'//换换默认星星
}
oText.innerHTML ='点击进行评分!'
}
}
}
aImg[i].onclick = function(){//鼠标点击效果
oClick = false;
oText.innerHTML = arrText[this.index];//后面文字
if(this.index<2){
for(var i=0;i<= this.index;i++){
aImg[i].src = 'img/nsg.gif';
}
}else if(1<this.index<5){
for(var i=0;i<=this.index;i++){
aImg[i].src = 'img/st.gif';
}
}
}
}
}
</script>
</head>
<body>
<div id="wrapper">
<span>请评分:</span>
<strong id="star">
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
</strong>
<span id="test">点击进行评分!</span>
</div>
<div id="wrapper1">
<span>请评分:</span>
<strong id="star1">
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
</strong>
<span id="test1">点击进行评分!</span>
</div>
<div id="wrapper2">
<span>请评分:</span>
<strong id="star2">
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
<a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
</strong>
<span id="test2">点击进行评分!</span>
</div>
</body>
</html>
图片文件在的我文件里面,麻烦去找一下。