【原创】用JQury来制作星星打分特效功能

2019-11-14 16:10:12

字体：大中小

来源：转载

供稿：网友

前言

常常我们看到一些评论，星星打分，今天我们就用Jq代码来实现，看看究竟是如何实现的其中有两个重要的事件mouseenter和mouseleave效果如下图

代码

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/CSS">        ol {            list-style: none;        }        li {            float: left;            cursor: pointer;        }    </style>    <script src="jquery/jquery-1.9.1.js"></script>    <script type="text/javascript">        var isSave = false;        $(function () {            //鼠标移到某个li标签上面,他以及他之前的都变成实心星星            $("#olStar li").mouseenter(function () {                //修改标识变量                isSave = false;                //自己变实心s                $(this).html("★").PRevAll().html("★");                $(this).nextAll().html("☆");                //前面的兄弟变实心            })            //鼠标离开li标签 全部还原            $("li").mouseleave(function () {                //判断是否保存结果                if (!isSave) { $("li").html("☆"); }            })            //点击li标签 保存分数            $("li").click(function () {                isSave = true;            })        })    </script></head><body>    <ol id="olStar">        <li>☆</li>        <li>☆</li>        <li>☆</li>        <li>☆</li>        <li>☆</li>    </ol></body></html>