脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS淘宝五星好评特效

JS与JQuery分别实现淘宝五星好评特效

 更新时间：2022年02月23日 13:19:54   作者：冯佳兴  
这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论