javascript实现星星评分特效

最新推荐文章于 2024-05-04 07:32:37 发布

原创最新推荐文章于 2024-05-04 07:32:37 发布 · 2.5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #星星特效

本文介绍了一个简单的星级评分系统的实现过程，使用HTML、CSS和JavaScript来创建动态的鼠标悬停效果和点击反馈。当用户将鼠标悬停在星星图标上时，星星会自动点亮并显示相应的分数，点击星星则可以提交评分。

源码+images：

即鼠标放在星星上面，星星自动亮且提交评分。

具体实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="pingfen.css" type="text/css">
    <script type="text/javascript" src="pingfen.js"></script>
</head>
<body>
<div id="pingfen">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

用css对图片位置进行一些修饰。

*{
    margin: 0;
    padding: 0;
}
#pingfen{
    width: 135px;
    margin: 40px auto;
    height: 28px;
}
#pingfen li{
    width: 27px;
    float: left;
    height: 28px;
    cursor: pointer;
    background: url("star.gif") no-repeat 0 0;
    list-style: none;
}

用js做图片特效。

window.onload = function () {
    var oPf = document.getElementById('pingfen');
    var aLi = oPf.getElementsByTagName('li');
    var i = 0;
    for (i = 0; i < aLi.length; i++) {
        aLi[i].index = i;
        aLi[i].onmouseover = function () {
            for (i = 0; i < aLi.length; i++) {
                if (i <= this.index) {
                    aLi[i].style.background = "url(star.gif) no-repeat 0 -29px";
                }
                else {
                    aLi[i].style.background = "url(star.gif) no-repeat 0 0";
                }
            }
        };

        aLi[i].onmousedown = function () {
            alert('提交成功:' + (this.index + 1) + '分');
        };
    }
};