JS與JQuery分別實(shí)現(xiàn)淘寶五星好評(píng)特效

更新時(shí)間：2022年02月23日 13:19:54 作者：馮佳興

這篇文章主要為大家詳細(xì)介紹了JS與JQuery分別實(shí)現(xiàn)淘寶五星好評(píng)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS與JQuery實(shí)現(xiàn)淘寶五星好評(píng)特效的具體代碼，供大家參考，具體內(nèi)容如下

我們經(jīng)常用的五星好評(píng)是如何來的，主要就是三個(gè)Event 中的三個(gè)事件分別：

onmouseover 指向事件

onmouseout 離開事件

onclick 點(diǎn)擊事件

代碼展示：

<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8" />
? ? <title></title>
? ? <script>
? ? ? ? var clickIndex = -1;
? ? ? ? onload = function () {
? ? ? ? ? ? //獲取所有的img標(biāo)簽
? ? ? ? ? ? var imgs = document.getElementsByTagName('img');
? ? ? ? ? ? //遍歷所有圖片對(duì)象,為每個(gè)圖片注冊(cè)指向事件
? ? ? ? ? ? for (var index in imgs) {
? ? ? ? ? ? ? ? imgs[index].onmouseover = function () {
? ? ? ? ? ? ? ? ? ? //將當(dāng)前的及之前的圖片變黃，之后的變?yōu)榛疑?
? ? ? ? ? ? ? ? ? ? var id = this.id;//獲取當(dāng)前元素的id
? ? ? ? ? ? ? ? ? ? for (var i = 0; i < imgs.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? //當(dāng)前元素之前的元素
? ? ? ? ? ? ? ? ? ? ? ? if (i <= id) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? //star2為黃色圖片
? ? ? ? ? ? ? ? ? ? ? ? ? ? imgs[i].src = 'images/star2.png';
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? //當(dāng)前元素之后的圖片，顏色為灰色
? ? ? ? ? ? ? ? ? ? ? ? ? ? imgs[i].src = 'images/star1.png';
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? //為每個(gè)圖片對(duì)象注冊(cè)移開事件
? ? ? ? ? ? ? ? imgs[index].onmouseout = function () {
? ? ? ? ? ? ? ? ? ? //被點(diǎn)擊項(xiàng)之前的元素為黃色
? ? ? ? ? ? ? ? ? ? for (var i = 0; i <= clickIndex; i++) {
? ? ? ? ? ? ? ? ? ? ? ? imgs[i].src = 'images/star2.png';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? for (var i = clickIndex + 1; i < imgs.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? //被點(diǎn)擊項(xiàng)之后的元素為灰色
? ? ? ? ? ? ? ? ? ? ? ? imgs[i].src = 'images/star1.png';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? //為每個(gè)圖片注冊(cè)點(diǎn)擊事件
? ? ? ? ? ? ? ? imgs[index].onclick = function () {
? ? ? ? ? ? ? ? ? ? //記錄下來被點(diǎn)的圖片編號(hào)，編號(hào)與索引對(duì)應(yīng)
? ? ? ? ? ? ? ? ? ? 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實(shí)現(xiàn)方式

<!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 = "☆";
? ? ? ? ? ? //鼠標(biāo)進(jìn)入事件
? ? ? ? ? ? $(".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前面的變成實(shí)心
? ? ? ? ? ? ? ? $("li.current").text(wjxs).prevAll().text(wjxs);
? ? ? ? ? ? });
?
? ? ? ? ? ? //給li注冊(cè)點(diǎn)擊事件，獲取當(dāng)前元素的位置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>