【原創】用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>