鼠标悬浮评分效果代码实例
分类：实例代码
分享一段代码实例，它实现了鼠标悬浮评分效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 300px;
height: auto;
margin: 0 auto;
}
ul {overflow: hidden;}
.star > li {
float: left;
margin-top: 15px;
font-size: 32px;
cursor: pointer;
}
.active {
color: #f00;
}
.text {
width: 100px;
height: 38px;
line-height: 38px;
border: solid 1px #ccc;
text-align: center;
margin-top: 20px;
display: none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
window.onload = function() {
score();
}
function score() {
var start = document.getElementById("star");
var startLi = start.getElementsByTagName("li");
var score = document.getElementById("result");
var text = document.getElementById("text-word");
var word = ['很差', '差', '一般', "好", "很好"]
for (var i = 0, len = startLi.length; i < len; i++) {
startLi[i].index = i; //给li添加一个索引值
startLi[i].onmouseover = function() {
text.style.display = "block";
//this指当前鼠标经过的对象li
text.innerHTML = word[this.index];
//鼠标经过当前li,<=当前li的索引值的所有li都变亮
for (var j = 0; j <= this.index; j++) {
startLi[j].className = "active";
}
}
startLi[i].onmouseout = function() {
text.style.display = "none";
for (var j = 0; j < startLi.length; j++) {
startLi[j].className = "";
}
}
startLi[i].onclick = function() {
score.innerHTML = (this.index + 1) + "分";
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="score">
<span>打分结果</span>
<span class="result" id="result"></span>
</div>
<ul class="star" id="star">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
<div class="text" id="text-word">一般</div>
</div>
</body>
</html>
鼠标悬浮评分效果代码实例，这样的场景在实际项目中还是用的比较多的，关于鼠标悬浮评分效果代码实例就介绍到这了。
鼠标悬浮评分效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。