JS淘宝五星好评特效
冯佳兴 人气:0我们经常用的五星好评是如何来的，主要就是三个Event 中的三个事件分别：
onmouseover 指向事件
onmouseout 离开事件
onclick 点击事件
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var clickIndex = -1;
onload = function () {
//获取所有的img标签
var imgs = document.getElementsByTagName('img');
//遍历所有图片对象,为每个图片注册指向事件
for (var index in imgs) {
imgs[index].onmouseover = function () {
//将当前的及之前的图片变黄，之后的变为灰色
var id = this.id;//获取当前元素的id
for (var i = 0; i < imgs.length; i++) {
//当前元素之前的元素
if (i <= id) {
//star2为黄色图片
imgs[i].src = 'images/star2.png';
}
else {
//当前元素之后的图片，颜色为灰色
imgs[i].src = 'images/star1.png';
}
}
};
//为每个图片对象注册移开事件
imgs[index].onmouseout = function () {
//被点击项之前的元素为黄色
for (var i = 0; i <= clickIndex; i++) {
imgs[i].src = 'images/star2.png';
}
for (var i = clickIndex + 1; i < imgs.length; i++) {
//被点击项之后的元素为灰色
imgs[i].src = 'images/star1.png';
}
};
//为每个图片注册点击事件
imgs[index].onclick = function () {
//记录下来被点的图片编号，编号与索引对应
clickIndex = parseInt(this.id);
};
}
};
</script>
</head>
<body>
<img id="0" src="images/star1.png" />
<img id="1" src="images/star1.png" />
<img id="2" src="images/star1.png" />
<img id="3" src="images/star1.png" />
<img id="4" src="images/star1.png" />
</body>
</html>JQuery实现方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.3.1.min.js"></script>
<style>
div{
width:200px;
height:200px;
background-color :pink;
}
</style>
<script>
$(function () {
var wjxs = "★";
var wjxk = "☆";
//鼠标进入事件
$(".comment>li").on("mouseenter", function () {
$(this).text(wjxs).prevAll().text(wjxs);
$(this).nextAll().text(wjxk);
});
//离开事件，所有的li变成空心
$(".comment").on("mouseleave", function () {
$(this).children().text(wjxk);
// 找到current，让current以及current前面的变成实心
$("li.current").text(wjxs).prevAll().text(wjxs);
});
//给li注册点击事件，获取当前元素的位置current
$(".comment>li").on("click", function () {
$(this).addClass("current").siblings().removeClass("current");
});
});
</script>
</head>
<body>
<div>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</div>
</body>
</html>
加载全部内容