哈哈，只是简单的原理（代码可能不是这样写的），明白原理就好～～～～～
<title></title>
<style type="text/css">
td {
font-size: 5px;
cursor: default;
}
</style>
</head>
<body>
<table id="Star">
<tr>
<td>☆</td>
</tr>
<tr>
<td>☆</td>
</tr>
<tr>
<td>☆</td>
</tr>
<tr>
<td>☆</td>
</tr>
<tr>
<td>☆</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
///未点击之前每个元素都有mouseover,mouseout事件，
///点击之后，每个元素都取消mouseover,mouseout事件，
///每个元素点击(包含此元素)之前变黑，之后(不包含)变白。
var len = 0;
//if (arguments[0].__proto__.constructor.name == 'MouseEvent') {
// idEnd = arguments[0].srcElement.id;
//} if (arguments[0].__proto__.constructor.name == 'HTMLTableCellElement') {
// idEnd = arguments[0].id;
//}
var BGChangNull = function (low, high) {
for (var i = low; i <= high; i++) {
document.getElementById(i).innerHTML = '☆';
}
};
var BGChangeValue = function (low, high) {
for (var i = low; i <= high; i++) {
document.getElementById(i).innerHTML = '★';
}
};
var BGChangeAble = function (bool) {
for (var i = 0; i < len; i++) {
document.getElementById(i).onmouseover.disabled = bool;
document.getElementById(i).onmouseout.disabled = bool;
}
};
var BGChangeOver = function () {
var idEnd = this.id;
if (!this.onmouseover.disabled) {
BGChangeValue(0, idEnd);
}
};
var TDChangeOut = function () {
var idEnd = this.id;
if (!this.onmouseout.disabled) {
BGChangNull(0, idEnd);
////var idEnd = this.id;
//BGChangNull(0, this.id);
////this.onmouseover.disabled = true;
}
//else {
// this.onmouseout.disabled = true;
//}
};
var TDOnclick = function () {//点击后改变over事件
var idEnd = this.id;
BGChangeValue(0, idEnd);
BGChangNull(++idEnd, len - 1);
BGChangeAble(true);
document.getElementsByTagName('span')[0].innerText = idEnd;
};
window.onload = function () {
var tds = document.getElementById('Star').getElementsByTagName('td');
len = parseInt(tds.length);
for (var i = 0; i < len; i++) {
tds[i].id = i;
tds[i].onmouseover = BGChangeOver;
tds[i].onmouseout = TDChangeOut;
tds[i].onclick = TDOnclick;
}
var sp = document.createElement('span');
document.body.appendChild(sp);
};
</script>
百度浏览器效果图：
JQuery代码：
<style type="text/css"> a { font-size: 25px; color: blue; cursor: default; } </style> <script src="JS/jquery-1.7.1.js"></script> <script type="text/javascript"> $(function () { var bo = true; $('a').mouseover(function () { if (bo) $(this).text("★").prevAll().text("★").end().nextAll('a').text("☆"); }).mouseout(function () { if (bo) $('a').text("☆"); }).click(function () { $('span').text($(this).prevAll().length + 1); bo = !bo; if (bo) { $(this).mouseover(); bo = !bo; } }); }); </script> </head> <body> <div> <a>☆</a><a>☆</a><a>☆</a><a>☆</a><a>☆</a><a>☆</a> <span></span> </div> </body>
jquery-1.7.1.js文件官网：http://jquery.com/download/