要点
1.鼠标移入移出事件
2.循环中（imgs[i].index=i;）给img加索引值，通过索引判断获取焦点的的是第几个
3.js中更改img的src路径（imgs[i].src=“love_red.png”;）
4.复制代码勿忘修改图片路径，包括js中移入移出时替换
html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>电影评分</title>
</head>
<body>
<div id="wai">
<div id="nei">
<img src="love_gary.png"/>
<img src="love_gary.png"/>
<img src="love_gary.png"/>
<img src="love_gary.png"/>
<img src="love_gary.png"/>
</div>
<p>良好</p>
</div>
</body>
</html>
css
<style>
#wai{
width:100%;
height:500px;
position:relative;
}
#wai #nei{
position:absolute;
width:160px;
height:32px;
left:50%;
display:block;
top:50%;
margin-left:-80px;
margin-top:-16px;
}
img{
float:left;
width:32px;
height:32px;
}
p{
display:block;
text-align:center;
line-height:50px;
border:1px solid black;
width:160px;
height:50px;
position:absolute;
top:250px;
left:50%;
margin-left:-80px;
display:none;
}
</style>
js
<script>
window.onload = function(){
var wai = document.getElementById('wai');
var ps = wai.getElementsByTagName('p')[0];
var imgs = wai.getElementsByTagName('img');
var datas = ['很差','较差','一般','推荐','力荐'];
var cc="love_red.png";
for(i=0; i<imgs.length; i++){
imgs[i].index=i; //每一个img加一个索引值
imgs[i].onmousemove = function(){//鼠标移入方法
ps.style.display="block";
ps.innerHTML = datas[this.index];
for(i=0;i<=this.index;i++){ //当前鼠标移入之前的变红
imgs[i].src="love_red.png"; //更改图片路径
}
}
imgs[i].onmouseout = function(){//鼠标移出方法
ps.style.display="none";
for(i=0;i<=this.index;i++){//所有心变空
imgs[i].src="love_gary.png";
}
}
imgs[i].onclick = function(){
alert("评分成功，"+(this.index+1)+"分");
}
}
}
</script>
若要使用插件可参考A5源码
http://down.admin5.com/texiao/139898.html
539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
