用JS和JQuery两种方案做五星好评效果的代码是什么
|
在日常操作或是项目的实际应用中，有不少朋友对于“用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两种方式做五星好评效果的代码是什么”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
