js实现五星好评效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        li {
            float: left;
            width: 28px;
            height: 28px;
            background: url(images/star.gif);
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>
<script>

    let oli = document.querySelectorAll("li");
    var oUL = document.querySelector("ul");
    //只能给Ul添加事件
    oUL.onmousemove = function (evt) {
        let e = evt || event;
        for (let i = 0; i < oli.length; i++) {
            if (e.pageX >= oli[0].offsetWidth * i) {//鼠标坐标若大于i个li判断
                oli[i].style.background = "url(images/star.gif) 0 -28px";
            } else {
                oli[i].style.background = "url(images/star.gif) 0 0";
            }
        }
    }
    oUL.onclick = function () {
        oUL.onmousemove = null;
    }
</script>

 

posted on 2020-06-05 23:00  被窝暖暖嘻嘻嘻  阅读(741)  评论(0)    收藏  举报

导航