|
- 帖子
- 1
- 主題
- 1
- 精華
- 0
- 積分
- 4
- 威望
- 1
- 金錢
- 1
|
我想要做星星評分效果，但是var starGroup = document.getElementById('star').children; 這一行瀏覽器一直跟我說找不到children，為何??
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>02dynamicStyleImg.html</title>
<style>
.s {
-webkit-filter: grayscale(1);
/*-webkit-filter: hue-rotate(200deg);*/
}
.n {
-webkit-filter: grayscale(0);
/*-webkit-filter: hue-rotate(1deg);*/
}
</style>
<script>
window.onload = starFunc;
var starGroup = document.getElementById('star').children;
function starFunc() {
for (var i = 0; i < 5; i++) {
starGroup[i].onmouseover = starHover; //把所有星星註冊moveover事件
starGroup[i].index = i;
};
}
function starHover()
{
var curIndex = this.index;//滑鼠移入時獲得該星星的索引
starLight(curIndex);
}
function starLight(index) {
for (var i = 0; i < starGroup.length; i++)
{
if (i <= index) {
starGroup[i].className = "s";//點亮星星
}
else {
starGroup[i].className = "n";//熄掉星星
}
}
}
</script>
</head>
<body>
<div id="star">
<img style="float:left" id="idstar1" tabindex="1" src="Images/star.jpg" />
<img style="float:left" id="idstar2" tabindex="2" src="Images/star2.jpg" />
<img style="float:left" id="idstar3" tabindex="3" src="Images/star3.jpg" />
<img style="float:left" id="idstar4" tabindex="4" src="Images/star4.jpg" />
<img style="float:left" id="idstar5" tabindex="5" src="Images/star5.jpg" />
</div>
<p id="starNotice"></p>
</body>
</html> |
|
發表於 2015-9-17 16:20
|