怎么新建MySQL数据库
发布时间：2022-11-15
作者：admin
阅读：268
阅读：268
在日常操作或是项目的实际应用中，有不少朋友对于“用JS和JQuery两种方式做五星好评效果的代码是什么”的问题会存在疑惑，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。
我们经常用的五星好评是如何来的，主要就是三个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>
到此，关于“用JS和JQuery两种方式做五星好评效果的代码是什么”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。如果想要学习更多的相关知识，欢迎关注群英网络，小编每天都会给大家分享实用的文章!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理